Merge pull request #787 from coralproject/long-title

Fix for long titles in the All Streams Queue

.eslintignore

@@ -12,4 +12,7 @@ plugins/*
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
+!plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured-comments
+
 node_modules

.gitignore

@@ -25,5 +25,7 @@ plugins/*
 !plugins/coral-plugin-love
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
+!plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured-comments
 
 **/node_modules/*

CODE_OF_CONDUCT.md

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

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!

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:7.8
+FROM node:7.10.1
 
 # Create app directory
 RUN mkdir -p /usr/src/app

PLUGINS.md

@@ -1,527 +1,3 @@
 # Talk Plugins
 
-Plugins for Talk can take various forms, currently we are only supporting server
-side plugins.
-
-## Plugin Registration
-
-The parsing order for the plugin registration is as follows:
-
-- `TALK_PLUGINS_JSON` environment variable
-- `plugins.json` file
-- `plugins.default.json` file
-
-If you need to "disable all plugins", you can simply provide `{}` as the
-contents of `process.env.TALK_PLUGINS_JSON` or the `plugins.json`.
-
-The format for this is thus:
-
-```json
-{
-  "server": [
-    "people"
-  ]
-}
-```
-
-Where we have a `server` key with an array of plugins that match the folder
-name in the `plugins/` folder. For example, the above config would
-require a plugin from `plugins/people`, which must provide a `index.js` file
-that returns an object that matches the Plugin Specification.
-
-If the package is external (available on NPM) you can specify the string for
-the version by using an object instead, for example:
-
-```json
-{
-  "server": [
-    {"people": "^1.2.0"}
-  ]
-}
-```
-
-External plugins can be resolved by running:
-
-```bash
-./bin/cli plugins reconcile
-```
-
-This achieves two things:
-
-1. It will traverse into local plugin folders and install their dependencies.
-  _Note that if the plugin is already installed and available in the node_modules folder, it will not be
-  fetched again unless there is a version mismatch._ This will result in the
-  project `package.json` and `yarn.lock` files to be modified, this is normal as
-  this ensures that repeated deployments (with the same config) will have the
-  same config, these changes should not be committed to source control.
-2. It will seek out dependencies that are listed in the object notation and try
-  to install them from npm.
-
-## Plugin Dependencies
-
-You may also include additional external dependencies in your local packages by
-specifying a `package.json` at your plugin root which will result in a
-`node_modules` folder being generated at the plugin root with your specific
-dependencies.
-
-## Deployment Solutions
-
-Plugins can be deployed with a production instance of Talk.
-
-### Source
-
-Source deployments can just modify the `plugins.json` file and include any
-local plugins into the `plugins/` directory. After including the config, you
-need to reconcile the plugins and build the static assets:
-
-```bash
-# get plugin dependancies and remote plugins
-./bin/cli plugins reconcile
-
-# build staic assets (including enabled client side plugins)
-yarn build
-```
-
-Then the application can be started as is.
-
-### Docker
-
-If you deploy using Docker, you can extend from the `*-onbuild` image, an
-example `Dockerfile` for your project could be:
-
-```Dockerfile
-FROM coralproject/talk:latest-onbuild
-```
-
-Where the directory for your instance would contain a `plugins.json` file
-describing the plugin requirements and a `plugins` directory containing any
-other local plugins that should be included.
-
-Onbuild triggers will execute when the image is building with your custom
-configuration and will ensure that the image is ready to use by building all
-assets inside the image as well.
-
-## Server Plugins
-
-### API
-
-You can access any API available inside the talk directory in a plugin by simply
-importing the file relative to the talk project root. An example would be if you
-wanted to import the `MetadataService`, you would simply write:
-
-```javascript
-const MetadataService = require('services/metadata');
-```
-
-### Specification
-
-Each plugin should export a single object with all hooks available on it.
-
-_**Note: You will have access to the whole core and other plugin's typeDefs,
-context, loaders, mutators, resolvers, hooks. This is intentional, as it
-encourages composing plugins to merge functionality, like a Slack plugin which
-provides a Slack notify context function as well as having the loader for
-comments.**_
-
-The following are the hooks available:
-
-#### Field: `typeDefs`
-
-```graphql
-enum COLOUR {
-  RED
-  BLUE
-}
-
-type Person {
-  name: String!
-  colour: COLOUR!
-}
-
-type RootMutation {
-  createPerson(name: String!): Person
-}
-
-type RootQuery {
-  people: [Person!]
-}
-
-type Subscription {
-  leader: Person
-}
-```
-
-Thanks to [gql-merge](https://www.npmjs.com/package/gql-merge) the contents of
-`typeDefs` should be a string that will be _merged_ with the existing type
-definitions. `enum`'s will be appended to, types will be appended, and new types
-will be added.
-
-#### Field: `context`
-
-```js
-{
-  Slack: (context) => ({
-    notify: (message) => {
-      // return a promise after we're done sending notifications.
-    }
-  })
-}
-```
-
-Any property provided here will be added to the context parameter available
-inside all resolvers, loaders, mutators, and of course, other context based
-plugins.
-
-The top level item must accept a context for the request which it should use to
-configure the context plugin before it would be mounted at `context.plugins`.
-This plugin above would mount at: `context.plugins.Slack`, or, if you're using
-[object destructuring](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), `{plugins: {Slack}}`.
-
-#### Field: `loaders`
-
-```js
-(context) => ({
-  People: {
-    load: () => db.people.find({user: context.user})
-  }
-})
-```
-
-Loaders should be provided as a function which returns a map which is used in
-the resolvers function. These must return a promise or a value.
-
-#### Field: `mutators`
-
-```js
-(context) => ({
-  People: {
-    create: (name) => {
-      return db.people.insert({user: context.user, name});
-    }
-  }
-})
-```
-
-Mutators should be provided as a function which returns a map which is used in
-the resolvers function. These must return a promise or a value.
-
-#### Field: `resolvers`
-
-```js
-{
-  Person: {
-    name(obj, args, context) {
-      return obj.name;
-    },
-    colour(obj, args, context) {
-      // Bill likes the colour red, everyone else likes blue.
-      return obj.name === 'bill' ? 'RED' : 'BLUE';
-    }
-  },
-  RootQuery: {
-    people(obj, args, {loaders: {People}}) {
-      return People.load();
-    }
-  },
-  RootMutation: {
-    createPerson(obj, {name}, {mutators: {People}}) {
-      return People.create(name);
-    }
-  }
-}
-```
-
-Should return a resolver map as described in the
-[Apollo Docs](http://dev.apollodata.com/tools/graphql-tools/resolvers.html#Resolver-map).
-
-This will merge with the existing resolvers in core and from previous plugins.
-
-#### Field: `hooks`
-
-```js
-{
-  RootMutation: {
-    createPerson: {
-      post: async (obj, args, {plugins: {Slack}}, info, person) {
-        if (!person) {
-          return person;
-        }
-
-        await Slack.notify(`A new person just was created with name ${person.name}`);
-
-        return person;
-      }
-    }
-  }
-}
-```
-
-Hooks here are pretty special, for each resolver field, you can specify a
-pre/post hook that will execute pre and post field resolution.
-
-If your post function accepts four parameters, then it can modify the field
-result. It is *required* that the function resolves a promise (or returns) with
-the modified value or simply the original if you didn't modify it.
-
-#### Field: `setupFunctions`
-
-```js
-setupFunctions: {
-  leader: (options, args) => ({
-    leader: {
-      filter: (person) => person.place === 1
-    },
-  }),
-}
-```
-
-Setup functions allow you to create filters that control which pubsub.publish() events
-send data to the client. If the type in question contains args, clients may subscribe using those arguments to further filter their subscription.
-
-For more information, see the [Apollo Docs](https://github.com/apollographql/graphql-subscriptions).
-
-#### Field: `tokenUserNotFound`
-
-```js
-tokenUserNotFound: async ({jwt, token}) => {
-  let profile = await someExternalService(token);
-  if (!profile) {
-    return null;
-  }
-
-  let user = await UserModel.findOneAndUpdate({
-    id: profile.id
-  }, {
-    id: profile.id,
-    username: profile.username,
-    lowercaseUsername: profile.username.toLowerCase(),
-    roles: [],
-    profiles: []
-  }, {
-    setDefaultsOnInsert: true,
-    new: true,
-    upsert: true
-  });
-
-  return user;
-}
-```
-
-The `tokenUserNotFound` hook allows auth integrations to hook into the event
-when a valid token is provided but a user can't be found in the database that
-matches the provided id.
-
-The function is async, and should return the user object that was created in the
-database, or null if the user wasn't found. The `jwt` paramenter of the object
-is the unpacked token, while `token` is the original jwt token string.
-
-#### Field: `router`
-
-```js
-(router) => {
-  router.get('/api/v1/people', (req, res) => {
-    res.json({people: [{name: 'Bob'}]});
-  });
-}
-```
-
-The Router hook allows you to create a function that accepts the base express
-router where you can mount any amount of middleware/routes to do any form of
-action needed by external applications. We also provide the authorization
-middleware via:
-
-```js
-const authorization = require('middleware/authorization');
-
-module.exports = {
-  router(router) {
-    router.get('/api/v1/people', authorization.needed('ADMIN'), (req, res) => {
-      res.json({people: [{name: 'SECRET PEOPLE'}]});
-    });
-  }
-}
-```
-
-#### Field: `tags`
-
-The tags hook allows a plugin to define tags that are code controlled (added
-or enabled by code). Below is an example pulled from the core off topic plugin
-on how to create a hook for the `OFF_TOPIC` name:
-
-```js
-[
-  {
-    name: 'OFF_TOPIC',
-    permissions: {
-      public: true,
-      self: true,
-      roles: []
-    },
-    models: ['COMMENTS'],
-    created_at: new Date()
-  }
-]
-```
-
-You can refer to `models/schema/tag.js` for the available schema to match when
-creating models to enable/disable specific features.
-
-#### Field: `passport`
-
-```js
-const FacebookStrategy = require('passport-facebook').Strategy;
-const UsersService = require('services/users');
-const {ValidateUserLogin, HandleAuthPopupCallback} = require('services/passport');
-
-module.exports = {
-  passport(passport) {
-    passport.use(new FacebookStrategy({
-      clientID: process.env.TALK_FACEBOOK_APP_ID,
-      clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
-      callbackURL: `${process.env.TALK_ROOT_URL}/api/v1/auth/facebook/callback`,
-      passReqToCallback: true,
-      profileFields: ['id', 'displayName', 'picture.type(large)']
-    }, async (req, accessToken, refreshToken, profile, done) => {
-
-      let user;
-      try {
-        user = await UsersService.findOrCreateExternalUser(profile);
-      } catch (err) {
-        return done(err);
-      }
-
-      return ValidateUserLogin(profile, user, done);
-    }));
-  },
-  router(router) {
-
-    // Note that we have to import the passport instance here, it is
-    // instantiated after all the strategies have been mounted.
-    const {passport} = require('services/passport');
-
-    /**
-     * Facebook auth endpoint, this will redirect the user immediatly to facebook
-     * for authorization.
-     */
-    router.get('/facebook', passport.authenticate('facebook', {display: 'popup', authType: 'rerequest', scope: ['public_profile']}));
-
-    /**
-     * Facebook callback endpoint, this will send the user a html page designed to
-     * send back the user credentials upon sucesfull login.
-     */
-    router.get('/facebook/callback', (req, res, next) => {
-
-      // Perform the facebook login flow and pass the data back through the opener.
-      passport.authenticate('facebook', HandleAuthPopupCallback(req, res, next))(req, res, next);
-    });
-  }
-};
-```
-
-This is a full example including the routes hook to add the required components
-to the application router to support a different auth strategy.
-
-### Full Example
-
-Contents of `plugins.json`:
-
-```json
-{
-  "server": [
-    "people"
-  ]
-}
-```
-
-Located in `plugins/people/index.js`:
-
-```js
-module.exports = {
-  typeDefs: `
-  enum COLOUR {
-    RED
-    BLUE
-  }
-
-  type Person {
-    name: String!
-    colour: COLOUR!
-  }
-
-  type RootMutation {
-    createPerson(name: String!): Person
-  }
-
-  type RootQuery {
-    people: [Person!]
-  }
-
-  type Subscription {
-    leader: Person
-  }
-  `,
-  context: {
-    Slack: () => ({
-      notify: (message) => {
-        // return a promise after we're done sending notifications.
-      }
-    })
-  },
-  loaders: ({user}) => ({
-    People: {
-      load: () => db.people.find({user})
-    }
-  }),
-  mutators: ({user}) => ({
-    People: {
-      create: (name) => {
-        return db.people.insert({user, name});
-      }
-    }
-  }),
-  resolvers: {
-    Person: {
-      name(obj, args, context) {
-        return obj.name;
-      },
-      colour(obj, args, context) {
-        // Bill likes the colour red, everyone else likes blue.
-        return obj.name === 'bill' ? 'RED' : 'BLUE';
-      }
-    },
-    RootQuery: {
-      people(obj, args, {loaders: {People}}) {
-        return People.load();
-      }
-    },
-    RootMutation: {
-      createPerson(obj, {name}, {mutators: {People}}) {
-        return People.create(name);
-      }
-    }
-  },
-  hooks: {
-    RootMutation: {
-      createPerson: {
-        post: async (obj, args, {plugins: {Slack}}, info, person) => {
-          if (!person) {
-            return person;
-          }
-
-          await Slack.notify(`A new person just was created with name ${person.name}`);
-
-          return person;
-        }
-      }
-    }
-  },
-  setupFunctions: {
-    leader: (options, args) => ({
-      leader: {
-        filter: (person) => person.place === 1
-      }
-    }
-  }
-};
-
-```
+Our documentation for Talk has moved! Utilize [this hyperlink](https://coralproject.github.io/talk/plugins.html) via click or tap to navigate your browser to the new location!

README.md

@@ -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
@@ -46,11 +50,12 @@ sign and verify tokens via a `HS256` algorithm.
 - `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
 - `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
 - `TALK_SMTP_PORT` (*required for email*) - SMTP port.
-- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
+- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - When `TRUE`, disables the dynamic setup endpoint. (Default `FALSE`)
 - `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
 - `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
 - `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
 - `TALK_KEEP_ALIVE` (_optional_) - The keepalive timeout that should be used to send keep alive messages through the websocket to keep the socket alive. (Default `30s`)
+- `TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS` (_optional_)  When `TRUE`, disables flagging of comments that match the suspect word filter. (Default `FALSE`)
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.

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 = {};

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 7.9
+    version: 7.10.1
   services:
     - docker
     - redis

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

@@ -66,6 +66,28 @@ const validation = (formData, dispatch, next) => {
     return;
   }
 
+  // Confirm Validation
+  const prefixLength = 'confirm'.length;
+  const confirm = validKeys
+    .filter((name) => {
+      if (!name.startsWith('confirm')) {
+        return false;
+      }
+
+      // Check that 'confirmX' equals 'X'.
+      const other = name.substr(prefixLength, 1).toLowerCase() + name.substr(prefixLength + 1);
+      const cond = formData[other] !== formData[name];
+      if (cond) {
+        dispatch(addError(name, errorMsj[name]));
+      }
+      return cond;
+    });
+
+  if (confirm.length) {
+    dispatch(hasError());
+    return;
+  }
+
   dispatch(clearErrors());
   next();
 };

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

@@ -0,0 +1,51 @@
+.root {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  overflow: hidden;
+  padding-left: 5px;
+  padding-top: 5px;
+
+}
+
+.rootFocuesd {
+  border-color: rgb(142, 76, 65);
+}
+
+.tag {
+  background-color: rgb(255, 220, 214);
+  border-radius: 2px;
+  border: 1px solid rgb(244, 126, 107);
+  color: rgb(244, 126, 107);
+  display: inline-block;
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  margin-bottom: 5px;
+  margin-right: 5px;
+  padding: 5px;
+}
+
+.tagRemove {
+  cursor: pointer;
+  font-weight: bold;
+  color: rgb(101, 24, 23);
+
+  &::before {
+    content: " ×";
+  }
+}
+
+.input > input {
+  background: transparent;
+  border: 0;
+  color: #777;
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  margin-bottom: 6px;
+  margin-top: 1px;
+  outline: none;
+  padding: 5px;
+}
+
+

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import TagsInput from 'react-tagsinput';
+import styles from './TagsInput.css';
+import AutosizeInput from 'react-input-autosize';
+
+const autosizingRenderInput = ({onChange, value, addTag: _, ...other}) =>
+  <AutosizeInput type='text' onChange={onChange} value={value} {...other} />;
+
+export default (props) => {
+  return (
+    <TagsInput
+      addOnBlur={true}
+      addOnPaste={true}
+      pasteSplit={(data) => data.split(',').map((d) => d.trim())}
+      className={styles.root}
+      focusedClassName={styles.rootFocus}
+      renderInput={autosizingRenderInput}
+      {...props}
+
+      tagProps={{
+        className: styles.tag,
+        classNameRemove: styles.tagRemove,
+        ...props.tagProps,
+      }}
+      inputProps={{
+        className: styles.input,
+        ...props.inputProps,
+      }}
+    />
+  );
+};

client/coral-admin/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
+import smoothscroll from 'smoothscroll-polyfill';
 
 import {getClient} from './services/client';
 import store from './services/store';
@@ -13,6 +14,7 @@ import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/he
 
 loadPluginsTranslations();
 injectPluginsReducers();
+smoothscroll.polyfill();
 
 render(
   <ApolloProvider client={getClient()} store={store}>

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

@@ -2,17 +2,18 @@ import React from 'react';
 import styles from './Community.css';
 
 import ActionButton from './ActionButton';
+import {username} from 'coral-plugin-flags/helpers/flagReasons';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 
 import t from 'coral-framework/services/i18n';
 
 const shortReasons = {
-  'This comment is offensive': t('community.offensive'),
-  'This looks like an ad/marketing': t('community.spam_ads'),
-  'This user is impersonating': t('community.impersonating'),
-  'I don\'t like this username': t('community.dont_like_username'),
-  'Other': t('community.other')
+  [username.other]: t('community.other'),
+  [username.spam]: t('community.spam_ads'),
+  [username.offensive]: t('community.offensive'),
+  [username.nolike]: t('community.dont_like_username'),
+  [username.impersonating]: t('community.impersonating'),
 };
 
 // Render a single user for the list

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

@@ -136,13 +136,6 @@
   resize: none;
 }
 
-#bannedWordlist, #suspectWordlist {
-  display: block;
-  input {
-    width: 100%;
-  }
-}
-
 .customCSSInput {
   width: 100%;
   font-size: 14px;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Card} from 'coral-ui';
 import styles from './Configure.css';
-import TagsInput from 'react-tagsinput';
+import TagsInput from 'coral-admin/src/components/TagsInput';
 import t from 'coral-framework/services/i18n';
 
 const Domainlist = ({domains, onChangeDomainlist}) => {
@@ -14,8 +14,6 @@ const Domainlist = ({domains, onChangeDomainlist}) => {
           <TagsInput
             value={domains}
             inputProps={{placeholder: 'URL'}}
-            addOnPaste={true}
-            pasteSplit={(data) => data.split(',').map((d) => d.trim())}
             onChange={(tags) => onChangeDomainlist('whitelist', tags)}
           />
         </div>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import t from 'coral-framework/services/i18n';
-import TagsInput from 'react-tagsinput';
+import TagsInput from 'coral-admin/src/components/TagsInput';
 import styles from './Configure.css';
 import {Card} from 'coral-ui';
 
@@ -13,8 +13,6 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
         <TagsInput
           value={bannedWords}
           inputProps={{placeholder: 'word or phrase'}}
-          addOnPaste={true}
-          pasteSplit={(data) => data.split(',').map((d) => d.trim())}
           onChange={(tags) => onChangeWordlist('banned', tags)}
         />
       </div>
@@ -26,8 +24,6 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
         <TagsInput
           value={suspectWords}
           inputProps={{placeholder: 'word or phrase'}}
-          addOnPaste={true}
-          pasteSplit={(data) => data.split(',').map((d) => d.trim())}
           onChange={(tags) => onChangeWordlist('suspect', tags)} />
       </div>
     </Card>

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

@@ -48,7 +48,7 @@ const InitialStep = (props) => {
             label={t('install.create.confirm_password')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
-            errorMsg={install.errors.confirm_password}
+            errorMsg={install.errors.confirmPassword}
             />
 
           {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './style.css';
 import {Button, Card} from 'coral-ui';
-import TagsInput from 'react-tagsinput';
+import TagsInput from 'coral-admin/src/components/TagsInput';
 
 import t from 'coral-framework/services/i18n';
 
@@ -16,9 +16,6 @@ const PermittedDomainsStep = (props) => {
         <TagsInput
           value={domains}
           inputProps={{placeholder: 'URL'}}
-          addOnBlur={true}
-          addOnPaste={true}
-          pasteSplit={(data) => data.split(',').map((d) => d.trim())}
           onChange={(tags) => handleDomainsChange(tags)}
         />
       </Card>

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

@@ -54,7 +54,7 @@ class Comment extends React.Component {
     // currently the highlighter plugin does not support out of the box.
     const searchWords = [...suspectWords, ...bannedWords]
       .filter((w) => {
-        return new RegExp(`(^|\\s)${w}(\\s|$)`).test(comment.body);
+        return new RegExp(`(^|\\s)${w}(\\s|$)`, 'i').test(comment.body);
       })
       .concat(linkText);
 
@@ -168,7 +168,7 @@ class Comment extends React.Component {
                 {' '}
                 <a
                   className={styles.external}
-                  href={`${comment.asset.url}#${comment.id}`}
+                  href={`${comment.asset.url}?commentId=${comment.id}`}
                   target="_blank"
                 >
                   <Icon name="open_in_new" /> {t('comment.view_context')}

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

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

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

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

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

@@ -4,8 +4,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import UserDetail from '../components/UserDetail';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {getSlotsFragments} from 'coral-framework/helpers/plugins';
-import {getDefinitionName} from 'coral-framework/utils';
+import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {
   changeUserDetailStatuses,
   clearUserDetailSelections,
@@ -26,9 +25,9 @@ const commentConnectionFragment = gql`
   ${Comment.fragments.comment}
 `;
 
-const pluginFragments = getSlotsFragments([
+const slots = [
   'userProfile',
-]);
+];
 
 class UserDetailContainer extends React.Component {
   static propTypes = {
@@ -80,7 +79,7 @@ export const withUserDetailQuery = withQuery(gql`
         id
         provider
       }
-      ${pluginFragments.spreads('user')}
+      ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id})
     rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
@@ -90,11 +89,8 @@ export const withUserDetailQuery = withQuery(gql`
     }) {
       ...CoralAdmin_Moderation_CommentConnection
     }
-    ${pluginFragments.spreads('root')}
+    ${getSlotFragmentSpreads(slots, 'root')}
   }
-  ${Comment.fragments.comment}
-  ${pluginFragments.definitions('user')}
-  ${pluginFragments.definitions('root')}
   ${commentConnectionFragment}
 `, {
   options: ({id, moderation: {userDetailStatuses: statuses}}) => {

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

@@ -1,35 +1,24 @@
-import {pym} from 'coral-framework';
+import pym from 'coral-framework/services/pym';
 import * as actions from '../constants/stream';
+import {buildUrl} from 'coral-framework/utils';
+import queryString from 'query-string';
 
 export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
 
-function removeParam(key, sourceURL) {
-  let rtn = sourceURL.split('?')[0];
-  let param;
-  let params_arr = [];
-  let queryString = (sourceURL.indexOf('?') !== -1) ? sourceURL.split('?')[1] : '';
-  if (queryString !== '') {
-    params_arr = queryString.split('&');
-    for (let i = params_arr.length - 1; i >= 0; i -= 1) {
-      param = params_arr[i].split('=')[0];
-      if (param === key) {
-        params_arr.splice(i, 1);
-      }
-    }
-    rtn = `${rtn}?${params_arr.join('&')}`;
-  }
-  return rtn;
-}
-
 export const viewAllComments = () => {
 
+  const search = queryString.stringify({
+    ...queryString.parse(location.search),
+    comment_id: undefined,
+  });
+
   // remove the comment_id url param
-  const modifiedUrl = removeParam('comment_id', location.href);
+  const url = buildUrl({...location, search});
 
   try {
 
     // "window" here refers to the embedded iframe
-    window.history.replaceState({}, document.title, modifiedUrl);
+    window.history.replaceState({}, document.title, url);
 
     // also change the parent url
     pym.sendMessage('coral-view-all-comments');
@@ -38,6 +27,28 @@ export const viewAllComments = () => {
   return {type: actions.VIEW_ALL_COMMENTS};
 };
 
+export const viewComment = (id) => {
+
+  const search = queryString.stringify({
+    ...queryString.parse(location.search),
+    comment_id: id,
+  });
+
+  // remove the comment_id url param
+  const url = buildUrl({...location, search});
+
+  try {
+
+    // "window" here refers to the embedded iframe
+    window.history.replaceState({}, document.title, url);
+
+    // also change the parent url
+    pym.sendMessage('coral-view-comment', id);
+  } catch (e) { /* not sure if we're worried about old browsers */ }
+
+  return {type: actions.VIEW_COMMENT, id};
+};
+
 export const addCommentClassName = (className) => ({
   type: actions.ADD_COMMENT_CLASSNAME,
   className
@@ -47,3 +58,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,198 @@
+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,
+      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}
+                  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,48 @@
-.Reply {
+.root {
+  margin-left: 20px;
+  margin-bottom: 16px;
   position: relative;
-  margin-bottom: 15px;
+  padding-top: 12px;
 }
 
-.Comment {
-  margin-bottom: 15px;
+.rootLevel0:first-child {
+  padding-top: 0;
+  border: 0;
+}
+
+.rootLevel0 {
+  margin-left: 0px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.comment {
   position: relative;
+  padding-left: 15px;
+}
+
+.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,15 +59,11 @@
   font-style: italic;
 }
 
-/* element in the top right of the Comment */
-.topRight {
-  float: right;
-  margin-top: 10px;
-  text-align: right;
-}
-
-.topRight > * {
-  text-align: initial;
+.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);
 }
 
 .topRight .popover {
@@ -44,11 +77,6 @@
   border-bottom: 2px solid currentColor;
 }
 
-.topRightMenu {
-  cursor: pointer;
-  margin-top: 5px;
-}
-
 .editCommentForm {
   margin-bottom: 10px;
 }
@@ -99,7 +127,7 @@
 }
 
 .commentInfoBar {
-  float: right;
+  margin-left: auto;
 }
 
 @keyframes enter {
@@ -111,3 +139,35 @@
 .enter {
   animation: enter 1000ms;
 }
+
+.commentContainer {
+}
+
+.commentAvatar {
+  max-width: 60px;
+}
+
+.commentAvatar:empty {
+  display: none;
+}
+
+.timerIcon {
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.commentFooter {
+  padding-top: 8px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.content {
+}
+
+.footer {
+
+}

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

@@ -1,23 +1,19 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-import PermalinkButton from 'coral-plugin-permalinks/PermalinkButton';
 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import TagLabel from 'coral-plugin-tag-label/TagLabel';
 import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
-import FlagComment from 'coral-plugin-flags/FlagComment';
+import {FlagComment} from 'coral-plugin-flags';
 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,
-  IfUserCanModifyBest,
-  BEST_TAG,
-  commentIsBest,
-  BestIndicator
-} from 'coral-plugin-best/BestButton';
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
 import {TopRightMenu} from './TopRightMenu';
@@ -25,7 +21,7 @@ import CommentContent from './CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {EditableCommentContent} from './EditableCommentContent';
-import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
+import {getActionSummary, iPerformedThisAction, forEachError} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
@@ -76,7 +72,6 @@ const ActionButton = ({children}) => {
 };
 
 export default class Comment extends React.Component {
-  isLoadingReplies = false;
 
   constructor(props) {
     super(props);
@@ -91,6 +86,7 @@ export default class Comment extends React.Component {
       isEditing: false,
       replyBoxVisible: false,
       animateEnter: false,
+      loadingState: '',
       ...resetCursors({}, props),
     };
   }
@@ -132,7 +128,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,
@@ -146,12 +141,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
     }),
@@ -170,7 +161,7 @@ export default class Comment extends React.Component {
       replies: PropTypes.object,
       user: PropTypes.shape({
         id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
+        username: PropTypes.string.isRequired
       }).isRequired,
       editing: PropTypes.shape({
         edited: PropTypes.bool,
@@ -181,23 +172,25 @@ export default class Comment extends React.Component {
     }).isRequired,
 
     // given a comment, return whether it should be rendered as ignored
-    commentIsIgnored: React.PropTypes.func,
-
-    // dispatch action to add a tag to a comment
-    addTag: React.PropTypes.func,
-
-    // dispatch action to remove a tag from a comment
-    removeTag: React.PropTypes.func,
+    commentIsIgnored: PropTypes.func,
 
     // dispatch action to ignore another user
-    ignoreUser: React.PropTypes.func,
+    ignoreUser: PropTypes.func,
 
     // edit a comment, passed (id, asset_id, { body })
-    editComment: React.PropTypes.func,
+    editComment: PropTypes.func,
+  }
+
+  editComment = (...args) => {
+    return this.props.editComment(this.props.comment.id, this.props.asset.id, ...args);
   }
 
   onClickEdit (e) {
     e.preventDefault();
+    if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
+      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      return;
+    }
     this.setState({isEditing: true});
   }
 
@@ -213,24 +206,23 @@ export default class Comment extends React.Component {
   }
 
   loadNewReplies = () => {
-    if (!this.isLoadingReplies) {
-      this.isLoadingReplies = true;
-      const {replies, replyCount, id} = this.props.comment;
-      if (replyCount > replies.nodes.length) {
-        this.props.loadMore(id)
-          .then(() => {
-            this.setState(resetCursors(this.state, this.props));
-            this.isLoadingReplies = false;
-          })
-          .catch((e) => {
-            this.isLoadingReplies = false;
-            throw e;
+    const {replies, replyCount, id} = this.props.comment;
+    if (replyCount > replies.nodes.length) {
+      this.setState({loadingState: 'loading'});
+      this.props.loadMore(id)
+        .then(() => {
+          this.setState({
+            ...resetCursors(this.state, this.props),
+            loadingState: 'success',
           });
-        return;
-      }
-      this.setState(resetCursors);
-      this.isLoadingReplies = false;
+        })
+        .catch((error) => {
+          this.setState({loadingState: 'error'});
+          forEachError(error, ({msg}) => {this.props.addNotification('error', msg);});
+        });
+      return;
     }
+    this.setState(resetCursors);
   };
 
   showReplyBox = () => {
@@ -240,7 +232,8 @@ export default class Comment extends React.Component {
     }
     if (can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
       this.props.setActiveReplyBox(this.props.comment.id);
-      return;
+    } else {
+      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
     }
     return;
   }
@@ -298,6 +291,8 @@ export default class Comment extends React.Component {
   render () {
     const {
       asset,
+      data,
+      root,
       depth,
       comment,
       postFlag,
@@ -309,23 +304,25 @@ export default class Comment extends React.Component {
       postDontAgree,
       setActiveReplyBox,
       activeReplyBox,
+      loadMore,
       deleteAction,
       disableReply,
       maxCharCount,
       addNotification,
       charCountEnable,
       showSignInDialog,
-      addTag,
-      removeTag,
       liveUpdates,
       commentIsIgnored,
       commentClassNames = []
     } = this.props;
 
     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',
@@ -338,47 +335,8 @@ 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) {
-        if (typeof errorToMessage !== 'function') {
-          errorToMessage = (error) => error.message;
-        }
-        try {
-          return await fn(...args);
-        } catch (error) {
-          addNotification('error', errorToMessage(error));
-          throw error;
-        }
-      };
-
-    const addBestTag = notifyOnError(
-      () =>
-        addTag({
-          id: comment.id,
-          name: BEST_TAG,
-          assetId: asset.id
-        }),
-      () => 'Failed to tag comment as best'
-    );
-
-    const removeBestTag = notifyOnError(
-      () =>
-        removeTag({
-          id: comment.id,
-          name: BEST_TAG,
-          assetId: asset.id
-        }),
-      () => 'Failed to remove best comment tag'
-    );
-
     /**
-     * classNamesToAdd
+     * conditionClassNames
      * adds classNames based on condition
      * classnames is an array of objects with key as classnames and value as conditions
      * i.e:
@@ -388,155 +346,169 @@ 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,
+      }
+    );
+
+    // props that are passed down the slots.
+    const slotProps = {
+      data,
+      root,
+      asset,
+      comment,
+      depth,
+    };
 
     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}
-            comment={comment}
-            commentId={comment.id}
-            data={this.props.data}
-            root={this.props.root}
+            className={styles.commentAvatar}
+            fill="commentAvatar"
+            {...slotProps}
             inline
           />
 
-          { (currentUser && (comment.user.id === currentUser.id)) &&
+          <div className={styles.commentContainer}>
 
-            /* 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>
-          }
-          { (currentUser && (comment.user.id !== currentUser.id)) &&
+            <div className={styles.header}>
+              <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
+              {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-              /* TopRightMenu allows currentUser to ignore other users' comments */
-              <span className={cn(styles.topRight, styles.topRightMenu)}>
-                <TopRightMenu
-                  comment={comment}
-                  ignoreUser={ignoreUser}
-                  addNotification={addNotification} />
+              <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>
-          }
-          {
-            this.state.isEditing
-            ? <EditableCommentContent
-                editComment={this.props.editComment.bind(null, comment.id, asset.id)}
-                addNotification={addNotification}
-                asset={asset}
-                comment={comment}
-                currentUser={currentUser}
-                maxCharCount={maxCharCount}
-                parentId={parentId}
-                stopEditing={this.stopEditing}
-                />
-            : <div>
-                <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
-              </div>
-          }
 
-          <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>}
-            <Slot
-              fill="commentActions"
-              data={this.props.data}
-              root={this.props.root}
-              comment={comment}
-              commentId={comment.id}
-              inline
-            />
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <ActionButton>
-              <PermalinkButton articleURL={asset.url} commentId={comment.id} />
-            </ActionButton>
-            <ActionButton>
-              <FlagComment
-                flaggedByCurrentUser={!!myFlag}
-                flag={myFlag}
-                id={comment.id}
-                author_id={comment.user.id}
-                postFlag={postFlag}
-                postDontAgree={postDontAgree}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser}
+              <Slot
+                className={styles.commentInfoBar}
+                fill="commentInfoBar"
+                {...slotProps}
               />
-            </ActionButton>
+
+              { (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>
+              }
+              { (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} />
+                  </span>
+              }
+            </div>
+            <div className={styles.content}>
+              {
+                this.state.isEditing
+                ? <EditableCommentContent
+                    editComment={this.editComment}
+                    addNotification={addNotification}
+                    comment={comment}
+                    currentUser={currentUser}
+                    charCountEnable={charCountEnable}
+                    maxCharCount={maxCharCount}
+                    parentId={parentId}
+                    stopEditing={this.stopEditing}
+                    />
+                : <div>
+                  <Slot
+                    fill="commentContent"
+                    defaultComponent={CommentContent}
+                    {...slotProps}
+                  />
+                  </div>
+              }
+            </div>
+            <div className={styles.footer}>
+              <div className="commentActionsLeft comment__action-container">
+                <Slot
+                  fill="commentReactions"
+                  {...slotProps}
+                  inline
+                />
+                {!disableReply &&
+                  <ActionButton>
+                    <ReplyButton
+                      onClick={this.showReplyBox}
+                      parentCommentId={parentId || comment.id}
+                      currentUserId={currentUser && currentUser.id}
+                    />
+                  </ActionButton>}
+              </div>
+              <div className="commentActionsRight comment__action-container">
+                <Slot
+                  fill="commentActions"
+                  wrapperComponent={ActionButton}
+                  {...slotProps}
+                  inline
+                />
+                <ActionButton>
+                  <FlagComment
+                    flaggedByCurrentUser={!!myFlag}
+                    flag={myFlag}
+                    id={comment.id}
+                    author_id={comment.user.id}
+                    postFlag={postFlag}
+                    addNotification={addNotification}
+                    postDontAgree={postDontAgree}
+                    deleteAction={deleteAction}
+                    showSignInDialog={showSignInDialog}
+                    currentUser={currentUser}
+                  />
+                </ActionButton>
+              </div>
+            </div>
           </div>
         </div>
+
         {activeReplyBox === comment.id
           ? <ReplyBox
               commentPostedHandler={() => {
@@ -545,10 +517,10 @@ export default class Comment extends React.Component {
               charCountEnable={charCountEnable}
               maxCharCount={maxCharCount}
               setActiveReplyBox={setActiveReplyBox}
-              parentId={parentId || comment.id}
+              parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
               addNotification={addNotification}
-              authorId={currentUser.id}
               postComment={postComment}
+              currentUser={currentUser}
               assetId={asset.id}
             />
           : null}
@@ -573,8 +545,7 @@ export default class Comment extends React.Component {
                 currentUser={currentUser}
                 postFlag={postFlag}
                 deleteAction={deleteAction}
-                addTag={addTag}
-                removeTag={removeTag}
+                loadMore={loadMore}
                 ignoreUser={ignoreUser}
                 charCountEnable={charCountEnable}
                 maxCharCount={maxCharCount}
@@ -587,12 +558,13 @@ export default class Comment extends React.Component {
               />;
         })}
         </TransitionGroup>
-        <div className="coral-load-more-replies">
+        <div className="talk-load-more-replies">
           <LoadMore
             topLevel={false}
-            replyCount={replyCount}
+            replyCount={moreRepliesCount}
             moreComments={hasMoreComments}
             loadMore={this.loadNewReplies}
+            loadingState={loadingState}
           />
         </div>
       </div>

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

@@ -4,6 +4,8 @@ import {CommentForm} from 'coral-plugin-commentbox/CommentForm';
 import styles from './Comment.css';
 import {CountdownSeconds} from './CountdownSeconds';
 import {getEditableUntilDate} from './util';
+import {can} from 'coral-framework/services/perms';
+import {forEachError} from 'coral-framework/utils';
 
 import {Icon} from 'coral-ui';
 import t from 'coral-framework/services/i18n';
@@ -16,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({
@@ -37,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 }}
@@ -45,10 +43,14 @@ export class EditableCommentContent extends React.Component {
     // called when editing should be stopped
     stopEditing: React.PropTypes.func,
   }
+
   constructor(props) {
     super(props);
-    this.editComment = this.editComment.bind(this);
     this.editWindowExpiryTimeout = null;
+    this.state = {
+      body: props.comment.body,
+      loadingState: '',
+    };
   }
   componentDidMount() {
     const editableUntil = getEditableUntilDate(this.props.comment);
@@ -65,69 +67,75 @@ export class EditableCommentContent extends React.Component {
       this.editWindowExpiryTimeout = clearTimeout(this.editWindowExpiryTimeout);
     }
   }
-  async editComment(edit) {
+
+  handleBodyChange = (body) => {
+    this.setState({body});
+  }
+
+  handleSubmit = async () => {
+    if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
+      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
+      return;
+    }
+
+    this.setState({loadingState: 'loading'});
+
     const {editComment, addNotification, stopEditing} = this.props;
     if (typeof editComment !== 'function') {return;}
     let response;
-    let successfullyEdited = false;
     try {
-      response = await editComment(edit);
-      const errors = (response && response.data && response.data.editComment)
-        ? response.data.editComment.errors
-        : null;
-      if (errors && (errors.length === 1)) {
-        throw errors[0];
-      }
-      successfullyEdited = true;
-    } catch (error) {
-      const errors = error.errors || [error];
-      errors.forEach((e) => {
-        if (e.translation_key) {
-          addNotification('error', t(`error.${e.translation_key}`));
-        } else if (error.networkError) {
-          addNotification('error', t('error.network_error'));
-        } else {
-          addNotification('error', t('edit_comment.unexpected_error'));
-          console.error(e);
-        }
-      });
-    }
-    if (successfullyEdited) {
+      response = await editComment({body: this.state.body});
+      this.setState({loadingState: 'success'});
       const status = response.data.editComment.comment.status;
       notifyForNewCommentStatus(this.props.addNotification, status);
-    }
-    if (successfullyEdited && typeof stopEditing === 'function') {
-      stopEditing();
+      if (typeof stopEditing === 'function') {
+        stopEditing();
+      }
+    } catch (error) {
+      this.setState({loadingState: 'error'});
+      forEachError(error, ({msg}) => addNotification('error', msg));
     }
   }
+
+  getEditableUntil = (props = this.props) => {
+    return getEditableUntilDate(props.comment);
+  }
+
+  isEditWindowExpired = (props = this.props) => {
+    return (this.getEditableUntil(props) - new Date()) < 0;
+  }
+
+  isSubmitEnabled = (comment) => {
+
+    // should be disabled if user hasn't actually changed their
+    // original comment
+    return (comment.body !== this.props.comment.body) && !this.isEditWindowExpired();
+  }
+
   render() {
-    const originalBody = this.props.comment.body;
-    const editableUntil = getEditableUntilDate(this.props.comment);
-    const editWindowExpired = (editableUntil - new Date()) < 0;
     return (
       <div className={styles.editCommentForm}>
         <CommentForm
           defaultValue={this.props.comment.body}
-          charCountEnable={this.props.asset.settings.charCountEnable}
+          charCountEnable={this.props.charCountEnable}
           maxCharCount={this.props.maxCharCount}
-          saveCommentEnabled={(comment) => {
-
-            // should be disabled if user hasn't actually changed their
-            // original comment
-            return (comment.body !== originalBody) && !editWindowExpired;
-          }}
-          saveComment={this.editComment}
+          submitEnabled={this.isSubmitEnabled}
+          body={this.state.body}
+          onBodyChange={this.handleBodyChange}
+          onSubmit={this.handleSubmit}
           bodyLabel={t('edit_comment.body_input_label')}
           bodyPlaceholder=""
           submitText={<span>{t('edit_comment.save_button')}</span>}
-          saveButtonCStyle="green"
-          cancelButtonClicked={this.props.stopEditing}
-          buttonClass={styles.button}
+          submitButtonCStyle="green"
+          onCancel={this.props.stopEditing}
+          submitButtonClassName={styles.button}
+          cancelButtonClassName={styles.button}
+          loadingState={this.state.loadingState}
           buttonContainerStart={
             <div className={styles.buttonContainerLeft}>
               <span className={styles.editWindowRemaining}>
                 {
-                  editWindowExpired
+                  this.isEditWindowExpired()
                   ? <span>
                       {t('edit_comment.edit_window_expired')}
                       {
@@ -137,9 +145,9 @@ 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={editableUntil}
+                        until={this.getEditableUntil()}
                         classNameForMsRemaining={(remainingMs) => (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }
                       />
                     </span>

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

@@ -4,67 +4,82 @@ 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 Popup from 'coral-framework/components/Popup';
+import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
 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, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog} = 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})}>
+        <IfSlotIsNotEmpty slot="login">
+          <Popup
+            href='/embed/stream/login'
+            title='Login'
+            features='menubar=0,resizable=0,width=500,height=550,top=200,left=500'
+            open={showSignInDialog}
+            focus={signInDialogFocus}
+            onFocus={focusSignInDialog}
+            onBlur={blurSignInDialog}
+            onClose={hideSignInDialog}
+          />
+        </IfSlotIsNotEmpty>
+        <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/IgnoreUserWizard.js

@@ -9,7 +9,7 @@ export class IgnoreUserWizard extends React.Component {
     // comment on which this menu appears
     user: PropTypes.shape({
       id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired
+      username: PropTypes.string.isRequired
     }).isRequired,
     cancel: PropTypes.func.isRequired,
 
@@ -47,7 +47,7 @@ export class IgnoreUserWizard extends React.Component {
     const step2Confirmation = (
       <div>
         <header>Ignore User</header>
-        <p>Are you sure you want to ignore { user.name }?</p>
+        <p>Are you sure you want to ignore { user.username }?</p>
         <div className={styles.textAlignRight}>
           <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
           <Button onClick={onClickIgnoreUser}>Ignore user</Button>

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

@@ -1,39 +1,31 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {Button} from 'coral-ui';
 import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
 
 class LoadMore extends React.Component {
-
-  componentDidMount () {
-    this.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);
-    }
-  }
-
-  loadMore = () => {
-    this.initialState = false;
-    this.props.loadMore();
+    return t('framework.show_x_more_replies', count);
   }
 
   render () {
-    const {topLevel, moreComments, replyCount} = this.props;
+    const {topLevel, moreComments, replyCount, loadingState, loadMore} = this.props;
+    const disabled = loadingState === 'loading';
     return moreComments
-      ? <div className='coral-load-more'>
+      ? <div className='talk-load-more'>
         <Button
-          onClick={this.loadMore}>
+          onClick={loadMore}
+          className={cn('talk-load-more-button', {[`talk-load-more-button-${loadingState}`]: loadingState})}
+          disabled={disabled}
+        >
           {topLevel ? t('framework.view_more_comments') : this.replyCountFormat(replyCount)}
         </Button>
       </div>
@@ -44,7 +36,9 @@ class LoadMore extends React.Component {
 LoadMore.propTypes = {
   replyCount: PropTypes.number,
   topLevel: PropTypes.bool.isRequired,
-  loadMore: PropTypes.func.isRequired
+  loadMore: PropTypes.func.isRequired,
+  moreComments: PropTypes.bool,
+  loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
 };
 
 export default LoadMore;

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,6 @@
-import React, {PropTypes} from 'react';
-import LoadMore from './LoadMore';
+import React from 'react';
+import PropTypes from 'prop-types';
+import {StreamError} from './StreamError';
 import Comment from '../components/Comment';
 import SuspendedAccount from './SuspendedAccount';
 import Slot from 'coral-framework/components/Slot';
@@ -9,154 +10,100 @@ 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 {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 {
 
-  isLoadingMore = false;
-
   constructor(props) {
     super(props);
-    this.state = resetCursors(this.state, props);
+    this.state = {
+      keepCommentBox: false,
+    };
   }
 
   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));
-      }
+    this.fallbackAllTab(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));
+  componentDidMount() {
+    this.fallbackAllTab();
+  }
+
+  fallbackAllTab(props = this.props) {
+    if (props.activeStreamTab !== 'all') {
+      const slotPlugins = this.getSlotComponents('streamTabs', props).map((c) => c.talkPluginName);
+      if (slotPlugins.indexOf(props.activeStreamTab) === -1) {
+        props.setActiveStreamTab('all');
       }
     }
   }
 
-  viewNewComments = () => {
-    this.setState(resetCursors);
-  };
+  getSlotProps({data, root, root: {asset}} = this.props) {
+    return {data, root, asset};
+  }
 
-  setActiveReplyBox = (reactKey) => {
+  getSlotComponents(slot, props = this.props) {
+    return getSlotComponents(slot, props.reduxState, this.getSlotProps(props));
+  }
+
+  setActiveReplyBox = (id) => {
     if (!this.props.auth.user) {
       this.props.showSignInDialog();
     } else {
-      this.props.setActiveReplyBox(reactKey);
+      this.props.setActiveReplyBox(id);
     }
   };
 
-  loadMoreComments = () => {
-    if (!this.isLoadingMore) {
-      this.isLoadingMore = true;
-      this.props.loadMoreComments()
-        .then(() => this.isLoadingMore = false)
-        .catch((e) => {
-          this.isLoadingMore = false;
-          throw e;
-        });
-    }
-  }
-
-  // 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,
-      addTag,
+      updateItem,
       ignoreUser,
+      activeStreamTab,
+      setActiveStreamTab,
+      loadNewReplies,
+      loadMoreComments,
+      viewAllComments,
       auth: {loggedIn, user},
-      removeTag,
-      pluginProps,
       editName
     } = this.props;
-    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 =
@@ -171,8 +118,25 @@ class Stream extends React.Component {
         me.ignoredUsers.find((u) => u.id === comment.user.id)
       );
     };
+
+    const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
+    const slotProps = this.getSlotProps();
+
+    if (!comment && !comments) {
+      console.error('Talk: No comments came back from the graph given that query. Please, check the query params.');
+      return <StreamError />;
+    }
+
     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">
@@ -189,7 +153,7 @@ class Stream extends React.Component {
                 <RestrictedMessageBox>
                   {t(
                     'stream.temporarily_suspended',
-                    this.props.root.settings.organizationName,
+                    root.settings.organizationName,
                     timeago(user.suspension.until)
                   )}
                 </RestrictedMessageBox>}
@@ -199,26 +163,26 @@ class Stream extends React.Component {
                   editName={editName}
                   currentUsername={user.username}
                 />}
-              {loggedIn &&
-                !banned &&
-                !temporarilySuspended &&
-                !highlightedComment &&
+              {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}
-                  authorId={user.id}
+                  currentUser={user}
                   charCountEnable={asset.settings.charCountEnable}
                   maxCharCount={asset.settings.charCount}
                 />}
             </div>
           : <p>{asset.settings.closedMessage}</p>}
 
-        <Slot fill="stream" />
+        <Slot
+          fill="stream"
+          {...slotProps}
+        />
 
         {loggedIn && (
           <ModerationLink
@@ -227,85 +191,98 @@ 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}
+                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}
-              />
-            </div>}
+            </div>
+            )
+          : <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
+              <div
+                className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
+              >
+                <Slot
+                  fill="streamFilter"
+                  {...slotProps}
+                />
+              </div>
+              <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
+                {this.getSlotComponents('streamTabs').map((PluginComponent) => (
+                  <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      {...slotProps}
+                      active={activeStreamTab === PluginComponent.talkPluginName}
+                    />
+                  </Tab>
+                ))}
+                <Tab tabId={'all'}>
+                  All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
+                </Tab>
+              </TabBar>
+              <TabContent activeTab={activeStreamTab} sub>
+                {this.getSlotComponents('streamTabPanes').map((PluginComponent) => (
+                  <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+                    <PluginComponent
+                      {...slotProps}
+                    />
+                  </TabPane>
+                ))}
+                <TabPane tabId={'all'}>
+                  <AllCommentsPane
+                    data={data}
+                    root={root}
+                    comments={comments}
+                    commentClassNames={commentClassNames}
+                    ignoreUser={ignoreUser}
+                    setActiveReplyBox={setActiveReplyBox}
+                    activeReplyBox={activeReplyBox}
+                    addNotification={addNotification}
+                    disableReply={!open}
+                    postComment={postComment}
+                    asset={asset}
+                    currentUser={user}
+                    postFlag={postFlag}
+                    postDontAgree={postDontAgree}
+                    loadMore={loadMoreComments}
+                    loadNewReplies={loadNewReplies}
+                    deleteAction={deleteAction}
+                    showSignInDialog={showSignInDialog}
+                    commentIsIgnored={commentIsIgnored}
+                    charCountEnable={asset.settings.charCountEnable}
+                    maxCharCount={asset.settings.charCount}
+                    editComment={editComment}
+                  />
+                </TabPane>
+              </TabContent>
+            </div>
+          }
       </div>
     );
   }
@@ -315,12 +292,6 @@ Stream.propTypes = {
   addNotification: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
 
-  // dispatch action to add a tag to a comment
-  addTag: PropTypes.func,
-
-  // dispatch action to remove a tag from a comment
-  removeTag: PropTypes.func,
-
   // dispatch action to ignore another user
   ignoreUser: React.PropTypes.func,
 

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

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

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

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

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

@@ -2,21 +2,25 @@
   outline: none;
 }
 
-/** 
+.toggler {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+}
+
+/**
  * Up/Down Chevrons for the top right menu
  */
 .chevron {
 }
 .chevron:before {
   content: '⌃';
-  display: inline-block; 
+  display: inline-block;
   position: relative;
-  top: 0.25em;   
+  top: 0.25em;
 }
 
-/* Down Arrow */   
+/* Down Arrow */
 .chevron.down:before {
-  display: inline-block; 
+  display: inline-block;
   position: relative;
   transform: rotate(180deg);
   top: 0;

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

@@ -27,9 +27,8 @@ export default class Toggleable extends React.Component {
     const {isOpen} = this.state;
     return (
       <ClickOutside onClickOutside={this.close}>
-        <span className={styles.Toggleable} tabIndex="0" >
-          <span className={styles.toggler}
-                onClick={this.toggle}>{isOpen ? upArrow : downArrow}</span>
+        <span className={styles.Toggleable}>
+          <button className={styles.toggler} onClick={this.toggle}>{isOpen ? upArrow : downArrow}</button>
           {isOpen ? children : null}
         </span>
       </ClickOutside>

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

@@ -12,7 +12,7 @@ export class TopRightMenu extends React.Component {
     comment: PropTypes.shape({
       user: PropTypes.shape({
         id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
+        username: PropTypes.string.isRequired
       }).isRequired
     }).isRequired,
     ignoreUser: PropTypes.func,

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

@@ -1,5 +1,8 @@
 export const SET_ACTIVE_REPLY_BOX = 'SET_ACTIVE_REPLY_BOX';
 export const ADDTL_COMMENTS_ON_LOAD_MORE = 10;
 export const VIEW_ALL_COMMENTS = 'VIEW_ALL_COMMENTS';
+export const VIEW_COMMENT = 'VIEW_COMMENT';
 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

@@ -1,25 +1,31 @@
 import {gql} from 'react-apollo';
 import Comment from '../components/Comment';
 import {withFragments} from 'coral-framework/hocs';
-import {getSlotsFragments} from 'coral-framework/helpers/plugins';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
 
-const pluginFragments = getSlotsFragments([
+const slots = [
   'streamQuestionArea',
   'commentInputArea',
   'commentInputDetailArea',
   'commentInfoBar',
   'commentActions',
   'commentContent',
-  'commentReactions'
-]);
+  'commentReactions',
+  'commentAvatar'
+];
 
 export default withFragments({
   root: gql`
     fragment CoralEmbedStream_Comment_root on RootQuery {
       __typename
-      ${pluginFragments.spreads('root')}
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+    `,
+  asset: gql`
+    fragment CoralEmbedStream_Comment_asset on Asset {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'asset')}
     }
-    ${pluginFragments.definitions('root')}
     `,
   comment: gql`
     fragment CoralEmbedStream_Comment_comment on Comment {
@@ -27,6 +33,7 @@ export default withFragments({
       body
       created_at
       status
+      replyCount
       tags {
         tag {
           name
@@ -34,7 +41,7 @@ export default withFragments({
       }
       user {
         id
-        name: username
+        username
       }
       action_summaries {
         __typename
@@ -47,8 +54,7 @@ export default withFragments({
         edited
         editableUntil
       }
-      ${pluginFragments.spreads('comment')}
+      ${getSlotFragmentSpreads(slots, 'comment')}
     }
-    ${pluginFragments.definitions('comment')}
   `
 })(Comment);

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

@@ -7,25 +7,79 @@ 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';
 import Stream from './Stream';
+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 {logout, checkLogin, focusSignInDialog, blurSignInDialog, hideSignInDialog} = authActions;
 const {fetchAssetSuccess} = assetActions;
 
 class EmbedContainer extends React.Component {
+  subscriptions = [];
+
+  subscribeToUpdates(props = this.props) {
+    if (props.auth.loggedIn) {
+      const newSubscriptions = [{
+        document: USER_BANNED_SUBSCRIPTION,
+        updateQuery: () => {
+          addNotification('info', t('your_account_has_been_banned'));
+        },
+      },
+      {
+        document: USER_SUSPENDED_SUBSCRIPTION,
+        updateQuery: () => {
+          addNotification('info', t('your_account_has_been_suspended'));
+        },
+      },
+      {
+        document: USERNAME_REJECTED_SUBSCRIPTION,
+        updateQuery: () => {
+          addNotification('info', t('your_username_has_been_rejected'));
+        },
+      }];
+
+      this.subscriptions = newSubscriptions.map((s) => props.data.subscribeToMore({
+        document: s.document,
+        variables: {
+          user_id: props.auth.user.id,
+        },
+        updateQuery: s.updateQuery,
+      }));
+    }
+  }
+
+  unsubscribe() {
+    this.subscriptions.forEach((unsubscribe) => unsubscribe());
+    this.subscriptions = [];
+  }
+
+  resubscribe(props) {
+    this.unsubscribe();
+    this.subscribeToUpdates(props);
+  }
+
+  componentDidMount() {
+    this.subscribeToUpdates();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+  }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.auth.loggedIn !== nextProps.auth.loggedIn) {
 
       // Refetch after login/logout.
       this.props.data.refetch();
+      this.resubscribe(nextProps);
     }
 
     const {fetchAssetSuccess} = this.props;
@@ -40,7 +94,7 @@ class EmbedContainer extends React.Component {
     if (!prevProps.root.comment && this.props.root.comment) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
-      setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
+      setTimeout(() => pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
     }
   }
 
@@ -52,11 +106,47 @@ class EmbedContainer extends React.Component {
   }
 }
 
+const USER_BANNED_SUBSCRIPTION = gql`
+  subscription UserBanned($user_id: ID!) {
+    userBanned(user_id: $user_id){
+      id
+      status
+      canEditName
+      suspension {
+        until
+      }
+    }
+  }
+`;
+
+const USER_SUSPENDED_SUBSCRIPTION = gql`
+  subscription UserSuspended($user_id: ID!) {
+    userSuspended(user_id: $user_id){
+      id
+      status
+      canEditName
+      suspension {
+        until
+      }
+    }
+  }
+`;
+
+const USERNAME_REJECTED_SUBSCRIPTION = gql`
+  subscription UsernameRejected($user_id: ID!) {
+    usernameRejected(user_id: $user_id){
+      id
+      status
+      canEditName
+      suspension {
+        until
+      }
+    }
+  }
+`;
+
 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
@@ -93,8 +183,11 @@ const mapDispatchToProps = (dispatch) =>
       logout,
       checkLogin,
       setActiveTab,
-      viewAllComments,
       fetchAssetSuccess,
+      addNotification,
+      focusSignInDialog,
+      blurSignInDialog,
+      hideSignInDialog,
     },
     dispatch
   );

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

@@ -2,26 +2,29 @@ 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,
+  withPostComment, withPostFlag, withPostDontAgree,
+  withDeleteAction, 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 {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {Spinner} from 'coral-ui';
-import {getDefinitionName} from 'coral-framework/utils';
 import {
   findCommentInEmbedQuery,
   insertCommentIntoEmbedQuery,
   removeCommentFromEmbedQuery,
   insertFetchedCommentsIntoEmbedQuery,
+  nest,
 } from '../graphql/utils';
+import omit from 'lodash/omit';
 
 const {showSignInDialog} = authActions;
 const {addNotification} = notificationActions;
@@ -30,11 +33,8 @@ class StreamContainer extends React.Component {
   subscriptions = [];
 
   subscribeToUpdates() {
-    const sub1 = this.props.data.subscribeToMore({
+    const newSubscriptions = [{
       document: COMMENTS_EDITED_SUBSCRIPTION,
-      variables: {
-        assetId: this.props.root.asset.id,
-      },
       updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
 
         // Ignore mutations from me.
@@ -52,13 +52,9 @@ class StreamContainer extends React.Component {
           return removeCommentFromEmbedQuery(prev, commentEdited.id);
         }
       },
-    });
-
-    const sub2 = this.props.data.subscribeToMore({
+    },
+    {
       document: COMMENTS_ADDED_SUBSCRIPTION,
-      variables: {
-        assetId: this.props.root.asset.id,
-      },
       updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
 
         // Ignore mutations from me.
@@ -81,9 +77,15 @@ class StreamContainer extends React.Component {
 
         return insertCommentIntoEmbedQuery(prev, commentAdded);
       }
-    });
+    }];
 
-    this.subscriptions.push(sub1, sub2);
+    this.subscriptions = newSubscriptions.map((s) => this.props.data.subscribeToMore({
+      document: s.document,
+      variables: {
+        assetId: this.props.root.asset.id,
+      },
+      updateQuery: s.updateQuery,
+    }));
   }
 
   unsubscribe() {
@@ -92,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,
@@ -158,22 +158,24 @@ 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(`
+      replies(excludeIgnored: $excludeIgnored) {
+        nodes {
+          id
+          ...${getDefinitionName(Comment.fragments.comment)}
+          ...nest
+        }
+        hasNextPage
+        startCursor
+        endCursor
       }
-      hasNextPage
-      startCursor
-      endCursor
-    }
+    `, THREADING_LEVEL)}
   }
   ${Comment.fragments.comment}
 `;
 
 const COMMENTS_ADDED_SUBSCRIPTION = gql`
-  subscription onCommentAdded($assetId: ID!, $excludeIgnored: Boolean){
+  subscription CommentAdded($assetId: ID!, $excludeIgnored: Boolean){
     commentAdded(asset_id: $assetId){
       parent {
         id
@@ -185,7 +187,7 @@ const COMMENTS_ADDED_SUBSCRIPTION = gql`
 `;
 
 const COMMENTS_EDITED_SUBSCRIPTION = gql`
-  subscription onCommentEdited($assetId: ID!){
+  subscription CommentEdited($assetId: ID!){
     commentEdited(asset_id: $assetId){
       id
       body
@@ -206,16 +208,18 @@ 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(`
+          replies(limit: 3, excludeIgnored: $excludeIgnored) {
+            nodes {
+              id
+              ...${getDefinitionName(Comment.fragments.comment)}
+              ...nest
+            }
+            hasNextPage
+            startCursor
+            endCursor
           }
-          hasNextPage
-          startCursor
-          endCursor
-        }
+        `, THREADING_LEVEL)}
       }
       hasNextPage
       startCursor
@@ -225,14 +229,22 @@ const LOAD_MORE_QUERY = gql`
   ${Comment.fragments.comment}
 `;
 
+const slots = [
+  '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
@@ -263,6 +275,8 @@ const fragments = {
           startCursor
           endCursor
         }
+        ${getSlotFragmentSpreads(slots, 'asset')}
+        ...${getDefinitionName(Comment.fragments.asset)}
       }
       me {
         status
@@ -273,8 +287,10 @@ const fragments = {
       settings {
         organizationName
       }
+      ${getSlotFragmentSpreads(slots, 'root')}
       ...${getDefinitionName(Comment.fragments.root)}
     }
+    ${Comment.fragments.asset}
     ${Comment.fragments.root}
     ${commentFragment}
   `,
@@ -290,7 +306,11 @@ const mapStateToProps = (state) => ({
   assetUrl: state.stream.assetUrl,
   activeTab: state.embed.activeTab,
   previousTab: state.embed.previousTab,
-  commentClassNames: state.stream.commentClassNames
+  activeStreamTab: state.stream.activeTab,
+  previousStreamTab: state.stream.previousTab,
+  commentClassNames: state.stream.commentClassNames,
+  pluginConfig: state.config.plugin_config,
+  reduxState: omit(state, 'apollo'),
 });
 
 const mapDispatchToProps = (dispatch) =>
@@ -299,6 +319,8 @@ const mapDispatchToProps = (dispatch) =>
     addNotification,
     setActiveReplyBox,
     editName,
+    viewAllComments,
+    setActiveStreamTab: setActiveTab,
   }, dispatch);
 
 export default compose(
@@ -307,8 +329,6 @@ export default compose(
   withPostComment,
   withPostFlag,
   withPostDontAgree,
-  withAddTag,
-  withRemoveTag,
   withIgnoreUser,
   withDeleteAction,
   withEditComment,

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

@@ -84,7 +84,7 @@ const extension = {
         }
         user {
           id
-          name: username
+          username
         }
         action_summaries {
           count
@@ -143,7 +143,7 @@ const extension = {
             user: {
               __typename: 'User',
               id: auth.toJS().user.id,
-              name: auth.toJS().user.username
+              username: auth.toJS().user.username
             },
             created_at: new Date().toISOString(),
             body,

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

@@ -1,21 +1,31 @@
 import update from 'immutability-helper';
+import {insertCommentsSorted} from 'coral-framework/utils';
+
+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 +107,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 +136,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;
@@ -132,14 +144,6 @@ export function findCommentInEmbedQuery(root, callbackOrId) {
   return findComment(root.asset.comments.nodes, callback);
 }
 
-const ascending = (a, b) => {
-  const dateA = new Date(a.created_at);
-  const dateB = new Date(b.created_at);
-  if (dateA < dateB) { return -1; }
-  if (dateA > dateB) { return 1; }
-  return 0;
-};
-
 function findAndInsertFetchedComments(parent, comments, parent_id) {
   const isAsset = parent.__typename === 'Asset';
   const connectionField = isAsset ? 'comments' : 'replies';
@@ -152,11 +156,9 @@ function findAndInsertFetchedComments(parent, comments, parent_id) {
           if (isAsset) {
             return nodes.concat(comments.nodes);
           }
-          return nodes
-          .concat(comments.nodes.filter(
+          return insertCommentsSorted(nodes, comments.nodes.filter(
             (comment) => !nodes.some((node) => node.id === comment.id)
-          ))
-          .sort(ascending);
+          ));
         }},
       },
     });
@@ -179,3 +181,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

@@ -17,14 +17,22 @@ function getQueryVariable(variable) {
 
 const initialState = {
   activeReplyBox: '',
-  assetId: getQueryVariable('asset_id'),
-  assetUrl: getQueryVariable('asset_url'),
-  commentId: getQueryVariable('comment_id'),
-  commentClassNames: []
+  assetId: getQueryVariable('asset_id') || '',
+  assetUrl: getQueryVariable('asset_url') || '',
+  commentId: getQueryVariable('comment_id') || '',
+  commentClassNames: [],
+  activeTab: process.env.TALK_DEFAULT_STREAM_TAB,
+  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,
@@ -40,6 +48,11 @@ export default function stream(state = initialState, action) {
       ...state,
       commentId: '',
     };
+  case actions.VIEW_COMMENT:
+    return {
+      ...state,
+      commentId: action.id,
+    };
   case actions.ADD_COMMENT_CLASSNAME :
     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,28 +174,17 @@ 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 */
-.coral-plugin-commentbox-container {
+.talk-plugin-commentbox-container {
   display: flex;
   width: 100%;
 }
 
-.coral-plugin-commentbox-textarea {
+.talk-plugin-commentbox-textarea {
   color: #262626;
   flex: 1;
   padding: 1em;
@@ -212,13 +194,13 @@ hr {
   border: 1px solid #9E9E9E;
 }
 
-.coral-plugin-commentbox-button-container {
+.talk-plugin-commentbox-button-container {
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
 }
 
-.coral-plugin-commentbox-button {
+.talk-plugin-commentbox-button {
   float: right;
   margin-top: 10px;
   padding: 5px 10px;
@@ -228,18 +210,18 @@ hr {
   border-radius: 2px;
 }
 
-.coral-plugin-commentbox-username {
+.talk-plugin-commentbox-username {
   width: 50%;
   padding-left: 5px;
   margin-bottom: 5px;
 }
 
-.coral-plugin-commentbox-char-count {
+.talk-plugin-commentbox-char-count {
   color: #ccc;
   text-align: right;
 }
 
-.coral-plugin-commentbox-char-max {
+.talk-plugin-commentbox-char-max {
   color: #d50000;
 }
 
@@ -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,
@@ -335,33 +297,6 @@ button.comment__action-button[disabled],
   display: inline-block;
 }
 
-.coral-plugin-permalinks-container {
-  /*position: relative;*/
-  z-index: 2;
-}
-
-.coral-plugin-permalinks-popover {
-  display: none;
-  background-color: white;
-  border: 1px solid black;
-  position: absolute;
-  padding: 5px;
-}
-
-.coral-plugin-permalinks-popover.active {
-  display: block;
-}
-
-.coral-plugin-permalinks-copy-field {
-  display: block;
-  width: calc(100% - 5px);
-}
-
-.coral-plugin-permalinks-copied-text {
-  float: right;
-  margin: 8px;
-}
-
 /* Flag Styles */
 
 .coral-plugin-flags-popup-form {
@@ -444,14 +379,16 @@ button.comment__action-button[disabled],
 
 /* Load More */
 
-.coral-load-more {
+.talk-load-more {
   text-align: center;
 }
 
-.coral-load-more button {
+.talk-load-more button {
+  width: 100%;
   text-align: center;
   color: #FFF;
   background-color: #2376D8;
+  border-radius: 2px;
   cursor: pointer;
   padding: 10px;
   border-radius: 2px;
@@ -460,34 +397,32 @@ button.comment__action-button[disabled],
   display: inline-block;
 }
 
-.coral-load-more:hover button {
+.talk-load-more:hover button {
   background-color: #4399FF;
 }
 
-.coral-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;
 }
 
-.coral-load-more-replies button.coral-load-more, .coral-new-comments  button.coral-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-embed/src/index.js

@@ -1,6 +1,8 @@
 import pym from 'pym.js';
+import URLSearchParams from 'url-search-params';
 
-import {stringify} from 'querystring';
+import {buildUrl} from 'coral-framework/utils';
+import queryString from 'query-string';
 
 // TODO: Styles should live in a separate file
 const snackbarStyles = {
@@ -28,6 +30,7 @@ const snackbarStyles = {
 // This function should return value of window.Coral
 const Coral = {};
 const Talk = (Coral.Talk = {});
+let notificationTimeout = null;
 
 // build the URL to load in the pym iframe
 function buildStreamIframeUrl(talkBaseUrl, query) {
@@ -37,7 +40,7 @@ function buildStreamIframeUrl(talkBaseUrl, query) {
     'embed/stream?'
   ].join('');
 
-  url += stringify(query);
+  url += queryString.stringify(query);
 
   return url;
 }
@@ -96,10 +99,37 @@ function configurePymParent(pymParent, opts) {
 
   // remove the permalink comment id from the hash
   pymParent.onMessage('coral-view-all-comments', function() {
+
+    const search = queryString.stringify({
+      ...queryString.parse(location.search),
+      commentId: undefined,
+    });
+
+    // remove the commentId url param
+    const url = buildUrl({...location, search});
+
     window.history.replaceState(
       {},
       document.title,
-      location.origin + location.pathname + location.search
+      url,
+    );
+  });
+
+  // remove the permalink comment id from the hash
+  pymParent.onMessage('coral-view-comment', function(id) {
+
+    const search = queryString.stringify({
+      ...queryString.parse(location.search),
+      commentId: id,
+    });
+
+    // remove the commentId url param
+    const url = buildUrl({...location, search});
+
+    window.history.replaceState(
+      {},
+      document.title,
+      url,
     );
   });
 
@@ -110,14 +140,15 @@ function configurePymParent(pymParent, opts) {
     snackbar.className = `coral-notif-${type}`;
     snackbar.textContent = text;
 
-    setTimeout(() => {
+    clearTimeout(notificationTimeout);
+    notificationTimeout = setTimeout(() => {
       snackbar.style.transform = 'translate(-50%, 0)';
       snackbar.style.opacity = 1;
-    }, 0);
 
-    setTimeout(() => {
-      snackbar.style.opacity = 0;
-    }, 5000);
+      notificationTimeout = setTimeout(() => {
+        snackbar.style.opacity = 0;
+      }, 7000);
+    }, 0);
   });
 
   // Helps child show notifications at the right scrollTop
@@ -188,11 +219,20 @@ Talk.render = function(el, opts) {
   // Compose the query to send down to the Talk API so it knows what to load.
   let query = {};
 
-  query.comment_id = window.location.hash.slice(1);
-  query.asset_id = opts.asset_id;
+  let urlParams = new URLSearchParams(window.location.search);
 
-  query.asset_url = opts.asset_url;
-  if (!query.asset_url) {
+  if (urlParams.get('commentId')) {
+    query.comment_id = urlParams.get('commentId');
+  }
+
+  if (opts.asset_id) {
+    query.asset_id = opts.asset_id;
+  }
+
+  if (opts.asset_url) {
+    query.asset_url = opts.asset_url;
+  }
+  else {
     try {
       query.asset_url = document.querySelector('link[rel="canonical"]').href;
     } catch (e) {

client/coral-framework/actions/auth.js

@@ -3,45 +3,37 @@ 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';
 
-export const showSignInDialog = () => (dispatch, getState) => {
-  const signInPopUp = window.open(
-    '/embed/stream/login',
-    'Login',
-    'menubar=0,resizable=0,width=500,height=550,top=200,left=500'
-  );
+export const showSignInDialog = () => ({
+  type: actions.SHOW_SIGNIN_DIALOG,
+});
 
-  // Workaround odd behavior in older WebKit versions, where
-  // onunload is called twice. (Encountered in IOS 8.3)
-  let loaded = false;
-  signInPopUp.onload = () => {
-    loaded = true;
-
-    // Fire some actions inside the popups reducer, to initialize required state.
-    const required = getState().asset.toJS().settings.requireEmailConfirmation;
-    const redirectUri = getState().auth.toJS().redirectUri;
-    signInPopUp.coralStore.dispatch(setRequireEmailVerification(required));
-    signInPopUp.coralStore.dispatch(setRedirectUri(redirectUri));
-  };
-
-  // Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
-  signInPopUp.onunload = () => {
-    if (loaded) {
-      dispatch(checkLogin());
-    }
-  };
-
-  dispatch({type: actions.SHOW_SIGNIN_DIALOG});
-};
 export const hideSignInDialog = () => (dispatch) => {
+  if (window.opener && window.opener !== window) {
+
+    // TODO: We need to address this when we refactor the
+    // login popup out of the embed.
+
+    // we are in a popup
+    window.close();
+  } else {
+    dispatch(checkLogin());
+  }
   dispatch({type: actions.HIDE_SIGNIN_DIALOG});
-  window.close();
 };
 
+export const focusSignInDialog = () => ({
+  type: actions.FOCUS_SIGNIN_DIALOG,
+});
+
+export const blurSignInDialog = () => ({
+  type: actions.BLUR_SIGNIN_DIALOG,
+});
+
 export const createUsernameRequest = () => ({
   type: actions.CREATE_USERNAME_REQUEST
 });

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/components/IfSlotIsEmpty.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {isSlotEmpty} from 'coral-framework/helpers/plugins';
+import PropTypes from 'prop-types';
+import omit from 'lodash/omit';
+
+function IfSlotIsEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
+  return (
+    <Component className={className}>
+      {isSlotEmpty(slot, reduxState, rest) ? children : null}
+    </Component>
+  );
+}
+
+IfSlotIsEmpty.propTypes = {
+  slot: PropTypes.string,
+  className: PropTypes.string,
+};
+
+const mapStateToProps = (state) => ({
+  reduxState: omit(state, 'apollo'),
+});
+
+export default connect(mapStateToProps, null)(IfSlotIsEmpty);
+

client/coral-framework/components/IfSlotIsNotEmpty.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {isSlotEmpty} from 'coral-framework/helpers/plugins';
+import PropTypes from 'prop-types';
+import omit from 'lodash/omit';
+
+function IfSlotIsNotEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
+  return (
+    <Component className={className}>
+      {!isSlotEmpty(slot, reduxState, rest) ? children : null}
+    </Component>
+  );
+}
+
+IfSlotIsNotEmpty.propTypes = {
+  slot: PropTypes.string,
+  className: PropTypes.string,
+};
+
+const mapStateToProps = (state) => ({
+  reduxState: omit(state, 'apollo'),
+});
+
+export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);
+

client/coral-framework/components/Popup.js

@@ -0,0 +1,152 @@
+import {Component} from 'react';
+import PropTypes from 'prop-types';
+
+export default class Popup extends Component {
+  ref = null;
+  detectCloseInterval = null;
+
+  constructor(props) {
+    super(props);
+
+    if (props.open) {
+      this.openWindow(props);
+    }
+  }
+
+  openWindow(props = this.props) {
+    this.ref = window.open(
+      props.href,
+      props.title,
+      props.features,
+    );
+
+    this.setCallbacks();
+  }
+
+  setCallbacks() {
+    this.ref.onload = () => {
+      clearInterval(this.detectCloseInterval);
+      this.onLoad();
+    };
+
+    this.ref.onfocus = () => {
+      this.onFocus();
+    };
+
+    this.ref.onblur = () => {
+      this.onBlur();
+    };
+
+    // Use `onunload` instead of `onbeforeunload` which is not supported in IOS Safari.
+    this.ref.onunload = () => {
+      this.onUnload();
+
+      const interval = setInterval(() => {
+        if (this.ref.onload === null) {
+          this.setCallbacks();
+          clearInterval(interval);
+        }
+      }, 50);
+
+      this.detectCloseInterval = setInterval(() => {
+        if (this.ref.closed) {
+          clearInterval(this.detectCloseInterval);
+          this.onClose();
+        }
+      }, 50);
+    };
+  }
+
+  closeWindow() {
+    if (this.ref) {
+      if (!this.ref.closed) {
+        this.ref.close();
+      }
+      this.ref = null;
+    }
+  }
+
+  focusWindow() {
+    if (this.ref && !this.ref.closed) {
+      this.ref.focus();
+    }
+  }
+
+  blurWindow() {
+    if (this.ref && !this.ref.closed) {
+      this.ref.blur();
+    }
+  }
+
+  onLoad = () => {
+    if (this.props.onLoad) {
+      this.props.onLoad();
+    }
+  }
+
+  onUnload = () => {
+    if (this.props.onUnload) {
+      this.props.onUnload();
+    }
+  }
+
+  onClose = () => {
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+  }
+
+  onFocus = () => {
+    if (this.props.onFocus) {
+      this.props.onFocus();
+    }
+  }
+
+  onBlur = () => {
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.open && !this.ref) {
+      this.openWindow(nextProps);
+    }
+
+    if (this.props.open && !nextProps.open) {
+      this.closeWindow();
+    }
+
+    if (!this.props.focus && nextProps.focus) {
+      this.focusWindow();
+    }
+
+    if (this.props.focus && !nextProps.focus) {
+      this.blurWindow();
+    }
+
+    if (this.props.href !== nextProps.href) {
+      this.ref.location.href = nextProps.href;
+    }
+  }
+
+  componentWillUnmount() {
+    this.closeWindow();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+Popup.propTypes = {
+  open: PropTypes.bool,
+  focus: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onLoad: PropTypes.func,
+  onUnload: PropTypes.func,
+  onClose: PropTypes.func,
+  href: PropTypes.string.isRequired,
+  features: PropTypes.string,
+};

client/coral-framework/components/Slot.js

@@ -3,15 +3,17 @@ import cn from 'classnames';
 import styles from './Slot.css';
 import {connect} from 'react-redux';
 import {getSlotElements} from 'coral-framework/helpers/plugins';
+import omit from 'lodash/omit';
 
-function Slot ({fill, inline = false, className, plugin_config: config, defaultComponent: DefaultComponent, ...rest}) {
-  let children = getSlotElements(fill, {...rest, config});
+function Slot ({fill, inline = false, className, reduxState, defaultComponent: DefaultComponent, ...rest}) {
+  let children = getSlotElements(fill, reduxState, rest);
+  const pluginConfig = reduxState.config.pluginConfig || {};
   if (children.length === 0 && DefaultComponent) {
     children = <DefaultComponent {...rest} />;
   }
 
   return (
-    <div className={cn({[styles.inline]: inline, [styles.debug]: config.debug}, className)}>
+    <div className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className)}>
       {children}
     </div>
   );
@@ -21,7 +23,9 @@ Slot.propTypes = {
   fill: React.PropTypes.string
 };
 
-const mapStateToProps = ({config: {plugin_config = {}}}) => ({plugin_config});
+const mapStateToProps = (state) => ({
+  reduxState: omit(state, 'apollo'),
+});
 
 export default connect(mapStateToProps, null)(Slot);
 

client/coral-framework/constants/auth.js

@@ -3,6 +3,8 @@ export const CLEAN_STATE = 'CLEAN_STATE';
 
 export const SHOW_SIGNIN_DIALOG = 'SHOW_SIGNIN_DIALOG';
 export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG';
+export const FOCUS_SIGNIN_DIALOG = 'FOCUS_SIGNIN_DIALOG';
+export const BLUR_SIGNIN_DIALOG = 'BLUR_SIGNIN_DIALOG';
 
 export const CREATE_USERNAME_REQUEST = 'CREATE_USERNAME_REQUEST';
 export const CREATE_USERNAME_SUCCESS = 'CREATE_USERNAME_SUCCESS';

client/coral-framework/graphql/mutations.js

@@ -1,6 +1,117 @@
 import {gql} from 'react-apollo';
 import withMutation from '../hocs/withMutation';
 
+function convertItemType(item_type) {
+  switch (item_type) {
+  case 'COMMENTS':
+    return 'Comment';
+  case 'USERS':
+    return 'User';
+  case 'ASSETS':
+    return 'Asset';
+  default:
+    throw new Error(`Unknown item_type ${item_type}`);
+  }
+}
+
+function getTagFragment(item_type) {
+  return gql`
+    fragment Coral_UpdateFragment on ${convertItemType(item_type)} {
+      tags {
+        tag {
+          name
+        }
+      }
+    }
+  `;
+}
+
+export const withAddTag = withMutation(
+  gql`
+    mutation AddTag($id: ID!, $asset_id: ID!, $name: String!, $item_type: TAGGABLE_ITEM_TYPE!) {
+      addTag(tag: {name: $name, id: $id, item_type: $item_type, asset_id: $asset_id}) {
+        ...ModifyTagResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      addTag: ({id, name, assetId, itemType}) => {
+        return mutate({
+          variables: {
+            id,
+            name,
+            asset_id: assetId,
+            item_type: itemType,
+          },
+          optimisticResponse: {
+            addTag: {
+              __typename: 'ModifyTagResponse',
+              errors: null,
+            }
+          },
+          update: (proxy) => {
+            const fragmentId = `${convertItemType(itemType)}_${id}`;
+            const fragment = getTagFragment(itemType);
+
+            // Read the data from our cache for this query.
+            const data = proxy.readFragment({fragment, id: fragmentId});
+
+            data.tags.push({
+              tag: {
+                __typename: 'Tag',
+                name
+              },
+              __typename: 'TagLink'
+            });
+
+            // Write our data back to the cache.
+            proxy.writeFragment({fragment, id: fragmentId, data});
+          },
+        });
+      }}),
+  });
+
+export const withRemoveTag = withMutation(
+  gql`
+    mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!, $item_type: TAGGABLE_ITEM_TYPE!) {
+      removeTag(tag: {name: $name, id: $id, item_type: $item_type, asset_id: $asset_id}) {
+        ...ModifyTagResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      removeTag: ({id, name, assetId, itemType}) => {
+        return mutate({
+          variables: {
+            id,
+            name,
+            asset_id: assetId,
+            item_type: itemType,
+          },
+          optimisticResponse: {
+            removeTag: {
+              __typename: 'ModifyTagResponse',
+              errors: null,
+            }
+          },
+          update: (proxy) => {
+            const fragmentId = `${convertItemType(itemType)}_${id}`;
+            const fragment = getTagFragment(itemType);
+
+            // Read the data from our cache for this query.
+            const data = proxy.readFragment({fragment, id: fragmentId});
+
+            const idx = data.tags.findIndex((i) => i.tag.name === name);
+
+            data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)];
+
+            // Write our data back to the cache.
+            proxy.writeFragment({fragment, id: fragmentId, data});
+          }
+        });
+      }}),
+  });
+
 export const withSetCommentStatus = withMutation(
   gql`
     mutation SetCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){
@@ -173,98 +284,6 @@ export const withDeleteAction = withMutation(
       }}),
   });
 
-const COMMENT_FRAGMENT = gql`
-    fragment CoralBest_UpdateFragment on Comment {
-      tags {
-        tag {
-          name
-        }
-      }
-    }
-  `;
-
-export const withAddTag = withMutation(
-  gql`
-    mutation AddTag($id: ID!, $asset_id: ID!, $name: String!) {
-      addTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) {
-        ...ModifyTagResponse
-      }
-    }
-  `, {
-    props: ({mutate}) => ({
-      addTag: ({id, name, assetId}) => {
-        return mutate({
-          variables: {
-            id,
-            name,
-            asset_id: assetId
-          },
-          optimisticResponse: {
-            addTag: {
-              __typename: 'ModifyTagResponse',
-              errors: null,
-            }
-          },
-          update: (proxy) => {
-            const fragmentId = `Comment_${id}`;
-
-            // Read the data from our cache for this query.
-            const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId});
-
-            data.tags.push({
-              tag: {
-                __typename: 'Tag',
-                name: 'BEST'
-              },
-              __typename: 'TagLink'
-            });
-
-            // Write our data back to the cache.
-            proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data});
-          },
-        });
-      }}),
-  });
-
-export const withRemoveTag = withMutation(
-  gql`
-    mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!) {
-      removeTag(tag: {name: $name, id: $id, item_type: COMMENTS, asset_id: $asset_id}) {
-        ...ModifyTagResponse
-      }
-    }
-  `, {
-    props: ({mutate}) => ({
-      removeTag: ({id, name, assetId}) => {
-        return mutate({
-          variables: {
-            id,
-            name,
-            asset_id: assetId
-          },
-          optimisticResponse: {
-            removeTag: {
-              __typename: 'ModifyTagResponse',
-              errors: null,
-            }
-          },
-          update: (proxy) => {
-            const fragmentId = `Comment_${id}`;
-
-            // Read the data from our cache for this query.
-            const data = proxy.readFragment({fragment: COMMENT_FRAGMENT, id: fragmentId});
-
-            const idx = data.tags.findIndex((i) => i.tag.name === 'BEST');
-
-            data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)];
-
-            // Write our data back to the cache.
-            proxy.writeFragment({fragment: COMMENT_FRAGMENT, id: fragmentId, data});
-          }
-        });
-      }}),
-  });
-
 export const withIgnoreUser = withMutation(
   gql`
     mutation IgnoreUser($id: ID!) {

client/coral-framework/helpers/plugins.js

@@ -2,81 +2,63 @@ import React from 'react';
 import uniq from 'lodash/uniq';
 import pick from 'lodash/pick';
 import merge from 'lodash/merge';
-import plugins from 'pluginsConfig';
-import flatten from 'lodash/flatten';
 import flattenDeep from 'lodash/flattenDeep';
-import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
+import flatten from 'lodash/flatten';
 import {loadTranslations} from 'coral-framework/services/i18n';
 import {injectReducers} from 'coral-framework/services/store';
 import camelize from './camelize';
+import plugins from 'pluginsConfig';
+
+export function getSlotComponents(slot, reduxState, props = {}) {
+  const pluginConfig = reduxState.config.pluginConfig || {};
+  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])
+  )
+    .filter((component) => {
+      if(!component.isExcluded) {
+        return true;
+      }
+      let resolvedProps = {...props, config: pluginConfig};
+      if (component.mapStateToProps) {
+        resolvedProps = {...resolvedProps, ...component.mapStateToProps(reduxState)};
+      }
+      return !component.isExcluded(resolvedProps);
+    });
+}
+
+export function isSlotEmpty(slot, reduxState, props) {
+  return getSlotComponents(slot, reduxState, props).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
-    .map((component, i) => React.createElement(component, {key: i, ...props}));
+export function getSlotElements(slot, reduxState, props = {}) {
+  const pluginConfig = reduxState.config.pluginConfig || {};
+  return getSlotComponents(slot, reduxState, props)
+    .map((component, i) => React.createElement(component, {key: i, ...props, config: pluginConfig}));
 }
 
-function getComponentFragments(components) {
-  const res = components
+export function getSlotFragments(slot, part) {
+  const components = uniq(flattenDeep(plugins
+    .filter((o) => o.module.slots ? o.module.slots[slot] : false)
+    .map((o) => o.module.slots[slot])
+  ));
+
+  const documents = components
     .map((c) => c.fragments)
-    .filter((fragments) => fragments)
+    .filter((fragments) => fragments && fragments[part])
     .reduce((res, fragments) => {
-      Object.keys(fragments).forEach((key) => {
-        if (!(key in res)) {
-          res[key] = {spreads: [], definitions: []};
-        }
-        res[key].spreads.push(getDefinitionName(fragments[key]));
-        res[key].definitions.push(fragments[key]);
-      });
+      res.push(fragments[part]);
       return res;
-    }, {});
+    }, []);
 
-  Object.keys(res).forEach((key) => {
-
-    // Assemble arguments for `gql` to call it directly without using template literals.
-    res[key].spreads = `...${res[key].spreads.join('\n...')}\n`;
-    res[key].definitions = mergeDocuments(res[key].definitions);
-  });
-
-  return res;
-}
-
-/**
- * Returns an object that can be used to compose fragments or queries.
- *
- * Example:
- * const pluginFragments = getSlotsFragments(['commentInfoBar', 'commentActions']);
- * const rootFragment = gql`
- *   fragment Comment_root on RootQuery {
- +     ${pluginFragments.spreads('root')}
- *   }
- *   ${pluginFragments.definitions('root')}
- * `;
- */
-export function getSlotsFragments(slots) {
-  if (!Array.isArray(slots)) {
-    slots = [slots];
-  }
-  const components = uniq(flattenDeep(slots.map((slot) => {
-    return plugins
-    .filter((o) => o.module.slots[slot])
-    .map((o) => o.module.slots[slot]);
-  })));
-
-  const fragments = getComponentFragments(components);
-  return {
-    spreads(key) {
-      return (fragments[key] && fragments[key].spreads) || '';
-    },
-    definitions(key) {
-      return (fragments[key] && fragments[key].definitions) || '';
-    },
-  };
+  return documents;
 }
 
 export function getGraphQLExtensions() {
@@ -99,7 +81,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/hocs/connect.js

@@ -0,0 +1,6 @@
+import {connect} from 'react-redux';
+
+export default (mapStateToProps, ...rest) => (BaseComponent) => {
+  BaseComponent.mapStateToProps = mapStateToProps;
+  return connect(mapStateToProps, ...rest)(BaseComponent);
+};

client/coral-framework/hocs/excludeIf.js

@@ -0,0 +1,4 @@
+export default (condition) => (BaseComponent) => {
+  BaseComponent.isExcluded = condition;
+  return BaseComponent;
+};

client/coral-framework/hocs/withFragments.js

@@ -1,14 +1,5 @@
-import React from 'react';
-import {getDisplayName} from '../helpers/hoc';
-
 // TODO: revisit `filtering` after https://github.com/apollographql/graphql-anywhere/issues/38.
-export default (fragments) => (WrappedComponent) => {
-  class WithFragments extends React.Component {
-    render() {
-      return <WrappedComponent {...this.props} />;
-    }
-  }
-  WithFragments.fragments = fragments;
-  WithFragments.displayName = `WithFragments(${getDisplayName(WrappedComponent)})`;
-  return WithFragments;
+export default (fragments) => (BaseComponent) => {
+  BaseComponent.fragments = fragments;
+  return BaseComponent;
 };

client/coral-framework/hocs/withQuery.js

@@ -15,14 +15,42 @@ const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
  * apply query options registered in the graphRegistry.
  */
 export default (document, config = {}) => (WrappedComponent) => {
-  config = {
+  const wrappedConfig = {
     ...config,
     options: config.options || {},
-    props: config.props || (({data}) => separateDataAndRoot(data)),
+    props: (args) => {
+      const wrappedArgs = {
+        ...args,
+        data: {
+          ...args.data,
+          subscribeToMore(stmArgs) {
+
+            // Resolve document fragments before passing it to `apollo-client`.
+            return args.data.subscribeToMore({
+              ...stmArgs,
+              document: resolveFragments(stmArgs.document),
+            });
+          },
+          fetchMore(lmArgs) {
+
+            // Resolve document fragments before passing it to `apollo-client`.
+            return args.data.fetchMore({
+              ...lmArgs,
+              query: resolveFragments(lmArgs.query),
+            });
+          },
+        },
+      };
+      return config.props
+        ? config.props(wrappedArgs)
+        : separateDataAndRoot(wrappedArgs.data);
+    },
   };
 
   const wrappedOptions = (data) => {
-    const base = (typeof config.options === 'function') ? config.options(data) : config.options;
+    const base = (typeof wrappedConfig.options === 'function')
+      ? wrappedConfig.options(data)
+      : wrappedConfig.options;
     const name = getDefinitionName(document);
     const configs = getQueryOptions(name);
     const reducerCallbacks =
@@ -45,7 +73,7 @@ export default (document, config = {}) => (WrappedComponent) => {
   let memoized = null;
   const getWrapped = () => {
     if (!memoized) {
-      memoized = graphql(resolveFragments(document), {...config, options: wrappedOptions})(WrappedComponent);
+      memoized = graphql(resolveFragments(document), {...wrappedConfig, options: wrappedOptions})(WrappedComponent);
     }
     return memoized;
   };

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,12 +1,13 @@
 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,
   loggedIn: false,
   user: null,
   showSignInDialog: false,
+  signInDialogFocus: false,
   showCreateUsernameDialog: false,
   checkedInitialLogin: false,
   view: 'SIGNIN',
@@ -29,13 +30,21 @@ const purge = (user) => {
 
 export default function auth (state = initialState, action) {
   switch (action.type) {
+  case actions.FOCUS_SIGNIN_DIALOG:
+    return state
+      .set('signInDialogFocus', true);
+  case actions.BLUR_SIGNIN_DIALOG:
+    return state
+      .set('signInDialogFocus', false);
   case actions.SHOW_SIGNIN_DIALOG :
     return state
-      .set('showSignInDialog', true);
+      .set('showSignInDialog', true)
+      .set('signInDialogFocus', true);
   case actions.HIDE_SIGNIN_DIALOG :
     return state.merge(Map({
       isLoading: false,
       showSignInDialog: false,
+      signInDialogFocus: false,
       view: 'SIGNIN',
       error: '',
       passwordRequestFailure: null,
@@ -151,6 +160,20 @@ export default function auth (state = initialState, action) {
   case actions.SET_REDIRECT_URI:
     return state
       .set('redirectUri', action.uri);
+  case 'APOLLO_SUBSCRIPTION_RESULT':
+    if (action.operationName === 'UserBanned' && state.getIn(['user', 'id']) === action.variables.user_id) {
+      return state
+        .mergeIn(['user'], action.result.data.userBanned);
+    }
+    if (action.operationName === 'UserSuspended' && state.getIn(['user', 'id']) === action.variables.user_id) {
+      return state
+        .mergeIn(['user'], action.result.data.userSuspended);
+    }
+    if (action.operationName === 'UsernameRejected' && state.getIn(['user', 'id']) === action.variables.user_id) {
+      return state
+        .mergeIn(['user'], action.result.data.usernameRejected);
+    }
+    return state;
   default :
     return state;
   }

client/coral-framework/services/graphqlRegistry.js

@@ -1,7 +1,18 @@
 import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
-import {getGraphQLExtensions} from 'coral-framework/helpers/plugins';
+import {getGraphQLExtensions, getSlotFragments} from 'coral-framework/helpers/plugins';
 import globalFragments from 'coral-framework/graphql/fragments';
 import uniq from 'lodash/uniq';
+import {gql} from 'react-apollo';
+
+/*
+ * Disable false-positive warning below, as it doesn't work well with how we currently
+ * assemble the queries.
+ *
+ * Warning: fragment with name {fragment name} already exists.
+ * graphql-tag enforces all fragment names across your application to be unique; read more about
+ * this in the docs: http://dev.apollodata.com/core/fragments.html#unique-names
+ */
+gql.disableFragmentWarnings();
 
 const fragments = {};
 const mutationOptions = {};
@@ -139,18 +150,47 @@ export function getQueryOptions(key) {
 }
 
 /**
- * Get a document with a fragment named `key`, which contains
- * all fragments added under this key.
+ * getSlotFragmentDocument handles `key`s in the form of TalkSlot_SlotName_Resource.
+ * It parses the slot name and the resource and usees the plugin API to assemble
+ * the fragment document.
  */
-export function getFragmentDocument(key) {
-  init();
+function getSlotFragmentDocument(key) {
+  const match = key.match(/TalkSlot_(.*)_(.*)/);
+  if (!match) {
+    return '';
+  }
 
+  const slot = match[1][0].toLowerCase() + match[1].substr(1);
+  const resource = match[2];
+  const documents = getSlotFragments(slot, resource);
+
+  if (documents.length === 0) {
+    return '';
+  }
+
+  const names = documents.map((d) => getDefinitionName(d));
+  const typeName = getTypeName(documents[0]);
+
+  // Assemble arguments for `gql` to call it directly without using template literals.
+  const main = `
+    fragment ${key} on ${typeName} {
+      ...${names.join('\n...')}\n
+    }
+  `;
+  return mergeDocuments([main, ...documents]);
+}
+
+/**
+ * getRegistryFragmentDocument assembles a fragment document using
+ * all registered fragment under given `key`.
+ */
+function getRegistryFragmentDocument(key) {
   if (!(key in fragments)) {
     return '';
   }
 
-  let documents = fragments[key] ? fragments[key].documents : [];
-  let fields =  fragments[key] ? `...${fragments[key].names.join('\n...')}\n` : ' __typename';
+  let documents = fragments[key].documents;
+  let fields =  `...${fragments[key].names.join('\n...')}\n`;
 
   // Assemble arguments for `gql` to call it directly without using template literals.
   const main = `
@@ -161,6 +201,16 @@ export function getFragmentDocument(key) {
   return mergeDocuments([main, ...documents]);
 }
 
+/**
+ * getFragmentDocument returns a fragment that assembles all registered
+ * fragments under given `key` or if `key` refers to Slot fragments it will
+ * return the slot fragments specified by this key.
+ */
+export function getFragmentDocument(key) {
+  init();
+  return getRegistryFragmentDocument(key) || getSlotFragmentDocument(key);
+}
+
 // The fragments and configs are lazily loaded to allow circular dependencies to work.
 // TODO: We might want to change this to an explicit add after we have lazy Queries and Mutations.
 let initialized = false;
@@ -178,19 +228,56 @@ function init() {
   getGraphQLExtensions().forEach((ext) => add(ext));
 }
 
+/**
+ * resolveFragments finds fragment spread names and attachs
+ * the related fragment document to the given root document.
+ */
 export function resolveFragments(document) {
   if (document.loc.source) {
 
-    // resolve fragments from registry
-    const matchedSubFragments = document.loc.source.body.match(/\.\.\.(.*)/g) || [];
-    const subFragments =
-      uniq(matchedSubFragments.map((f) => f.replace('...', '')))
-      .map((key) => getFragmentDocument(key))
-      .filter((i) => i);
+    // Remember keys that we have already resolved.
+    const resolvedKeys = [];
 
-    if (subFragments.length > 0) {
-      return mergeDocuments([document, ...subFragments]);
+    // Spreads from slots that are empty and need to be removed.
+    // (works around the issue that we don't know the resource type
+    // if we don't have a fragment)
+    const spreadsToBeRemoved = [];
+
+    // fragments to be attached.
+    const subFragments = [];
+
+    // body contains the final result.
+    let body = document.loc.source.body;
+
+    let done = false;
+    while (!done) {
+      done = true;
+
+      const matchedSubFragments = body.match(/\.\.\.([_a-zA-Z][_a-zA-Z0-9]*)/g) || [];
+      uniq(matchedSubFragments.map((f) => f.replace('...', '')))
+        .filter((key) => resolvedKeys.indexOf(key) === -1)
+        .forEach((key) => {
+          const doc = getFragmentDocument(key);
+          if (doc) {
+            subFragments.push(doc);
+
+            // We found a new fragment, so we are not done yet.
+            done = false;
+          } else if(key.startsWith('TalkSlot_')) {
+            spreadsToBeRemoved.push(key);
+          }
+          resolvedKeys.push(key);
+        });
+
+      body = mergeDocuments([body, ...subFragments]).loc.source.body;
     }
+
+    spreadsToBeRemoved.forEach((key) => {
+      const regex = new RegExp(`\\.\\.\\.${key}\n`, 'g');
+      body = body.replace(regex, '');
+    });
+
+    return gql`${body}`;
   } else {
     console.warn('Can only resolve fragments from documents definied using the gql tag.');
   }

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,28 @@
+.buttonReset {
+
+  /* reset button */
+  user-select: none;
+  outline: invert none medium;
+  border: none;
+  touch-action: manipulation;
+  padding: 0;
+
+  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;
+  white-space: nowrap;
+  background: transparent;
+  font-size: inherit;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+  &::-moz-focus-inner: {
+    border: 0;
+  }
+}

client/coral-framework/utils/index.js

@@ -1,4 +1,6 @@
 import {gql} from 'react-apollo';
+import t from 'coral-framework/services/i18n';
+import {capitalize} from 'coral-framework/helpers/strings';
 
 export const getTotalActionCount = (type, comment) => {
   return comment.action_summaries
@@ -126,3 +128,62 @@ export function createDefaultResponseFragments(...names) {
   });
   return result;
 }
+
+export function forEachError(error, callback) {
+  const errors = error.errors || [error];
+  errors.forEach((e) => {
+    console.error(e);
+
+    let msg = '';
+    if (e.translation_key) {
+      msg = t(`error.${e.translation_key}`);
+    } else if (error.networkError) {
+      msg = t('error.network_error');
+    } else {
+      msg = t('error.unexpected');
+    }
+    callback({error: e, msg});
+  });
+}
+
+const ascending = (a, b) => {
+  const dateA = new Date(a.created_at);
+  const dateB = new Date(b.created_at);
+  if (dateA < dateB) { return -1; }
+  if (dateA > dateB) { return 1; }
+  return 0;
+};
+
+const descending = (a, b) => ascending(a, b) * -1;
+
+export function insertCommentsSorted(nodes, comments, sortOrder = 'CHRONOLOGICAL') {
+  const added = nodes.concat(comments);
+  if (sortOrder === 'CHRONOLOGICAL') {
+    return added.sort(ascending);
+  }
+  if (sortOrder === 'REVERSE_CHRONOLOGICAL') {
+    return added.sort(descending);
+  }
+  throw new Error(`Unknown sort order ${sortOrder}`);
+}
+
+export const isTagged = (tags, which) => tags.some((t) => t.tag.name === which);
+
+export function buildUrl({protocol, hostname, port, pathname, search, hash} = window.location) {
+  if (search && search[0] !== '?') {
+    search = `?${search}`;
+  } else if (search === '?') {
+    search = '';
+  }
+  return `${protocol}//${hostname}${port ? `:${port}` : ''}${pathname}${search}${hash}`;
+}
+
+/**
+ * getSlotFragmentSpreads will return a string in the
+ * expected format for slot fragments, given `slots` and  `resource`.
+ * e.g. `getSlotFragmentSpreads(['slotName'], 'root')` returns
+ * `...TalkSlot_SlotName_root`.
+ */
+export function getSlotFragmentSpreads(slots, resource) {
+  return `...${slots.map((s) => `TalkSlot_${capitalize(s)}_${resource}`).join('\n...')}\n`;
+}

client/coral-plugin-author-name/AuthorName.js

@@ -24,7 +24,7 @@ export default class AuthorName extends Component {
     return (
       <div
         className={`${packagename}-text`}>
-        {author && author.name}
+        {author && author.username}
       </div>
     );
   }

client/coral-plugin-best/BestButton.js

@@ -1,104 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-
-import t from 'coral-framework/services/i18n';
-
-import {Icon} from 'coral-ui';
-import classnames from 'classnames';
-
-// tag string for best comments
-export const BEST_TAG = 'BEST';
-
-export const commentIsBest = ({tags} = {}) => tags.some((t) => t.tag.name === BEST_TAG);
-
-const name = 'coral-plugin-best';
-
-// It would be best if the backend/api held this business logic
-const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].some((role) => roles.includes(role));
-
-// Put this on a comment to show that it is best
-
-export const BestIndicator = ({children = <Icon name='star'/>}) => (
-  <span aria-label={t('comment_is_best')}>
-    { children }
-  </span>
-);
-
-/**
- * Component that only renders children if the provided user prop can modify best tags
- */
-export const IfUserCanModifyBest = ({user, children}) => {
-  if (!(user && canModifyBestTag(user))) {return null;}
-  return children;
-};
-
-/**
- * Button that lets a moderator tag a comment as "Best".
- * Used to recognize really good comments.
- */
-export class BestButton extends Component {
-  static propTypes = {
-
-    // whether the comment is already tagged as best
-    isBest: PropTypes.bool.isRequired,
-
-    // set that this comment is best
-    addBest: PropTypes.func.isRequired,
-
-    // remove the best status
-    removeBest: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props);
-    this.onClickAddBest = this.onClickAddBest.bind(this);
-    this.onClickRemoveBest = this.onClickRemoveBest.bind(this);
-  }
-
-  state = {
-    isSaving: false
-  }
-
-  async onClickAddBest(e) {
-    e.preventDefault();
-    const {addBest} = this.props;
-    if (!addBest) {
-      console.warn('BestButton#onClickAddBest called even though there is no addBest prop. doing nothing');
-      return;
-    }
-    this.setState({isSaving: true});
-    try {
-      await addBest();
-    } finally {
-      this.setState({isSaving: false});
-    }
-  }
-
-  async onClickRemoveBest(e) {
-    e.preventDefault();
-    const {removeBest} = this.props;
-    if (!removeBest) {
-      console.warn('BestButton#onClickAddBest called even though there is no removeBest prop. doing nothing');
-      return;
-    }
-    this.setState({isSaving: true});
-    try {
-      await removeBest();
-    } finally {
-      this.setState({isSaving: false});
-    }
-  }
-
-  render() {
-    const {isBest, addBest, removeBest} = this.props;
-    const {isSaving} = this.state;
-    const disabled = isSaving || !(isBest ? removeBest : addBest);
-    return (
-      <button onClick={isBest ? this.onClickRemoveBest : this.onClickAddBest}
-              disabled={disabled}
-              className={classnames(`${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
-              aria-label={t(isBest ? 'unset_best' : 'set_best')}>
-        <Icon name={ isBest ? 'star' : 'star_border' } />
-      </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

@@ -1,12 +1,14 @@
 import React, {PropTypes} from 'react';
 
 import t from 'coral-framework/services/i18n';
+import {can} from 'coral-framework/services/perms';
+import {forEachError} from 'coral-framework/utils';
 
 import Slot from 'coral-framework/components/Slot';
 import {connect} from 'react-redux';
 import {CommentForm} from './CommentForm';
 
-export const name = 'coral-plugin-commentbox';
+export const name = 'talk-plugin-commentbox';
 
 // Given a newly posted comment's status, show a notification to the user
 // if needed
@@ -27,36 +29,45 @@ class CommentBox extends React.Component {
 
     this.state = {
       username: '',
+      body: '',
+      loadingState: '',
 
-      // incremented on successful post to clear form
-      postedCount: 0,
       hooks: {
         preSubmit: [],
         postSubmit: []
       }
     };
   }
-  postComment = ({body}) => {
+
+  handleSubmit = () => {
     const {
       commentPostedHandler,
       postComment,
       assetId,
       parentId,
       addNotification,
+      currentUser,
     } = this.props;
 
+    if (!can(currentUser, 'INTERACT_WITH_COMMUNITY')) {
+      addNotification('error', t('error.NOT_AUTHORIZED'));
+      return;
+    }
+
     let comment = {
       asset_id: assetId,
       parent_id: parentId,
-      body,
+      body: this.state.body,
       ...this.props.commentBox
     };
 
     // Execute preSubmit Hooks
     this.state.hooks.preSubmit.forEach((hook) => hook());
+    this.setState({loadingState: 'loading'});
 
     postComment(comment, 'comments')
       .then(({data}) => {
+        this.setState({loadingState: 'success', body: ''});
         const postedComment = data.createComment.comment;
 
         // Execute postSubmit Hooks
@@ -69,10 +80,13 @@ class CommentBox extends React.Component {
         }
       })
       .catch((err) => {
-        console.error(err);
+        this.setState({loadingState: 'error'});
+        forEachError(err, ({msg}) => addNotification('error', msg));
       });
+  }
 
-    this.setState({postedCount: this.state.postedCount + 1});
+  handleBodyChange = (body) => {
+    this.setState({body});
   }
 
   registerHook = (hookType = '', hook = () => {}) => {
@@ -123,21 +137,17 @@ class CommentBox extends React.Component {
     });
   }
 
-  handleChange = (e) => this.setState({body: e.target.value});
-
   render () {
-    const {styles, isReply, authorId, maxCharCount} = this.props;
-    let {cancelButtonClicked} = this.props;
+    const {isReply, maxCharCount} = this.props;
+    let {onCancel} = this.props;
 
-    if (isReply && typeof cancelButtonClicked !== 'function') {
-      console.warn('the CommentBox component should have a cancelButtonClicked callback defined if it lives in a Reply');
-      cancelButtonClicked = () => {};
+    if (isReply && typeof onCancel !== 'function') {
+      console.warn('the CommentBox component should have a onCancel callback defined if it lives in a Reply');
+      onCancel = () => {};
     }
 
     return <div>
       <CommentForm
-        styles={styles}
-        key={this.state.postedCount}
         defaultValue={this.props.defaultValue}
         bodyInputId={isReply ? 'replyText' : 'commentText'}
         bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
@@ -145,7 +155,7 @@ class CommentBox extends React.Component {
         charCountEnable={this.props.charCountEnable}
         bodyPlaceholder={t('comment.comment')}
         bodyInputId={isReply ? 'replyText' : 'commentText'}
-        saveComment={authorId && this.postComment}
+        body={this.state.body}
         buttonContainerStart={<Slot
           fill="commentInputDetailArea"
           registerHook={this.registerHook}
@@ -153,7 +163,10 @@ class CommentBox extends React.Component {
           isReply={isReply}
           inline
         />}
-        cancelButtonClicked={cancelButtonClicked}
+        onBodyChange={this.handleBodyChange}
+        loadingState={this.state.loadingState}
+        onCancel={onCancel}
+        onSubmit={this.handleSubmit}
       />
     </div>;
   }
@@ -167,12 +180,13 @@ CommentBox.propTypes = {
   maxCharCount: PropTypes.number,
   commentPostedHandler: PropTypes.func,
   postComment: PropTypes.func.isRequired,
-  cancelButtonClicked: PropTypes.func,
+  onCancel: PropTypes.func,
   assetId: PropTypes.string.isRequired,
   parentId: PropTypes.string,
-  authorId: PropTypes.string.isRequired,
+  currentUser: PropTypes.object.isRequired,
   isReply: PropTypes.bool.isRequired,
   canPost: PropTypes.bool,
+  addNotification: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = ({commentBox}) => ({commentBox});

client/coral-plugin-commentbox/CommentForm.js

@@ -1,9 +1,10 @@
 import React, {PropTypes} from 'react';
 import {Button} from 'coral-ui';
-import classnames from 'classnames';
+import cn from 'classnames';
 import Slot from 'coral-framework/components/Slot';
 
 import {name} from './CommentBox';
+import styles from './styles.css';
 
 import t from 'coral-framework/services/i18n';
 
@@ -13,15 +14,8 @@ import t from 'coral-framework/services/i18n';
 export class CommentForm extends React.Component {
   static propTypes = {
 
-    // Initial value for underlying comment body textarea
-    defaultValue: PropTypes.string,
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
-    cancelButtonClicked: PropTypes.func,
-
-    // Save the comment in the form.
-    // Will be passed { body: String }
-    saveComment: PropTypes.func.isRequired,
 
     // DOM ID for form input that edits comment body
     bodyInputId: PropTypes.string,
@@ -38,53 +32,63 @@ export class CommentForm extends React.Component {
     // render inside submit button
     submitText: PropTypes.node,
 
-    styles: PropTypes.shape({
-      textarea: PropTypes.string
-    }),
+    // cStyle for enabled submit <coral-ui/Button>
+    submitButtonCStyle: PropTypes.string,
 
-    // cStyle for enabled save <coral-ui/Button>
-    saveButtonCStyle: PropTypes.string,
-
-    // return whether the save button should be enabled for the provided
+    // return whether the submit button should be enabled for the provided
     // comment ({ body }) (for reasons other than charCount)
-    saveCommentEnabled: PropTypes.func,
+    submitEnabled: PropTypes.func,
 
     // className to add to buttons
-    buttonClass: PropTypes.string,
+    submitButtonClassName: PropTypes.string,
+    cancelButtonClassName: PropTypes.string,
+
+    body: PropTypes.string.isRequired,
+    onBodyChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func,
+    state: PropTypes.string,
+    loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
   }
   static get defaultProps() {
     return {
       bodyLabel: t('comment_box.comment'),
       bodyPlaceholder: t('comment_box.comment'),
       submitText: t('comment_box.post'),
-      saveButtonCStyle: 'darkGrey',
-      saveCommentEnabled: () => true,
+      submitButtonCStyle: 'darkGrey',
+      submitEnabled: () => true,
     };
   }
-  constructor(props) {
-    super(props);
-    this.onBodyChange = this.onBodyChange.bind(this);
-    this.onClickSubmit = this.onClickSubmit.bind(this);
-    this.state = {
-      body: props.defaultValue || ''
-    };
-  }
-  onBodyChange(e) {
-    this.setState({body: e.target.value});
-  }
-  onClickSubmit(e) {
-    e.preventDefault();
-    const {saveComment} = this.props;
-    const {body} = this.state;
-    saveComment({body});
-  }
-  render() {
-    const {maxCharCount, styles, saveCommentEnabled, buttonClass, charCountEnable} = this.props;
 
-    const body = this.state.body;
+  onBodyChange = (e) => {
+    this.props.onBodyChange(e.target.value);
+  }
+
+  onClickSubmit = () => {
+    this.props.onSubmit();
+  }
+
+  getButtonClassName = () => {
+    switch (this.props.loadingState) {
+    case 'loading':
+      return cn(`${name}-button-loading`, styles.buttonLoading);
+    case 'success':
+      return cn(`${name}-button-success`, styles.buttonSuccess);
+    case 'error':
+      return cn(`${name}-button-error`, styles.buttonError);
+    default:
+      return '';
+    }
+  }
+
+  render() {
+    const {maxCharCount, submitEnabled, cancelButtonClassName, submitButtonClassName, charCountEnable, body, loadingState} = this.props;
+
     const length = body.length;
     const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount;
-    const disablePostComment = !length || isRespectingMaxCount(length) || !saveCommentEnabled({body});
+    const disableSubmitButton = !length || isRespectingMaxCount(length) || !submitEnabled({body}) || loadingState === 'loading';
+    const disableCancelButton = loadingState === 'loading';
+    const disableTextArea = loadingState === 'loading';
 
     return <div>
       <div className={`${name}-container`}>
@@ -95,13 +99,14 @@ export class CommentForm extends React.Component {
           {this.props.bodyLabel}
         </label>
         <textarea
-          style={styles && styles.textarea}
           className={`${name}-textarea`}
-          value={this.state.body}
+          value={body}
           placeholder={this.props.bodyPlaceholder}
           id={this.props.bodyInputId}
           onChange={this.onBodyChange}
-          rows={3}/>
+          rows={3}
+          disabled={disableTextArea}
+        />
         <Slot fill='commentInputArea' />
       </div>
       {
@@ -113,20 +118,22 @@ export class CommentForm extends React.Component {
       <div className={`${name}-button-container`}>
         { this.props.buttonContainerStart }
         {
-          typeof this.props.cancelButtonClicked === 'function' && (
+          typeof this.props.onCancel === 'function' && (
             <Button
               cStyle='darkGrey'
-              className={classnames(`${name}-cancel-button`, buttonClass)}
-              onClick={this.props.cancelButtonClicked}>
+              className={cn(`${name}-cancel-button`, cancelButtonClassName)}
+              onClick={this.props.onCancel}
+              disabled={disableCancelButton}
+            >
               {t('comment_box.cancel')}
             </Button>
           )
         }
         <Button
-          cStyle={disablePostComment ? 'lightGrey' : this.props.saveButtonCStyle}
-          className={classnames(`${name}-button`, buttonClass)}
+          cStyle={disableSubmitButton ? 'lightGrey' : this.props.submitButtonCStyle}
+          className={cn(`${name}-button`, submitButtonClassName, this.getButtonClassName())}
           onClick={this.onClickSubmit}
-          disabled={disablePostComment ? 'disabled' : ''}>
+          disabled={disableSubmitButton ? 'disabled' : ''}>
           {this.props.submitText}
         </Button>
       </div>

client/coral-plugin-commentbox/styles.css

@@ -1,6 +1,90 @@
-.slot {
-  display: inline-block;
-  div {
-    display: inline-block;
-    }
+/**
+ * Example loading state animations on the button.
+ */
+
+/*
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
 }
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes comeAndGo {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1.0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.buttonLoading, .buttonLoading:disabled, .buttonLoading:hover {
+  transition: none;
+  font-weight: normal;
+}
+
+.buttonSuccess, .buttonSuccess:disabled, .buttonSuccess:hover  {
+}
+
+.buttonSuccess::before {
+  content: '✓';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 3px 0px;
+  animation: comeAndGo 2s forwards;
+  background: rgb(51, 204, 51);
+  color: white;
+}
+
+.buttonLoading::before {
+  content: '';
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 0px;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+.buttonError, .buttonError:disabled, .buttonError:hover  {
+}
+
+.buttonError::before {
+  content: '×';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 3px 0px;
+  animation: comeAndGo 2s forwards;
+  background: rgb(250, 100, 100);
+  color: white;
+}
+
+*/

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';
 
@@ -39,6 +41,8 @@ export default class FlagButton extends Component {
       } else {
         this.setState({showMenu: true});
       }
+    } else {
+      this.props.addNotification('error', t('error.NOT_AUTHORIZED'));
     }
   }
 
@@ -144,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>
           {
@@ -212,12 +219,3 @@ export default class FlagButton extends Component {
     );
   }
 }
-
-const styles = {
-  flaggedIcon: {
-    color: '#F00'
-  },
-  unflaggedIcon: {
-    color: 'inherit'
-  }
-};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import FlagButton from './FlagButton';
 
 import t from 'coral-framework/services/i18n';
+import {username, comment} from '../helpers/flagReasons';
 
 const FlagComment = (props) => <FlagButton {...props} getPopupMenu={getPopupMenu} />;
 
@@ -20,17 +21,17 @@ const getPopupMenu = [
   (itemType) => {
     const options = itemType === 'COMMENTS' ?
     [
-      {val: 'This comment is offensive', text: t('comment_offensive')},
-      {val: 'This looks like an ad/marketing', text: t('marketing')},
-      {val: 'I don\'t agree with this comment', text: t('no_agree_comment')},
-      {val: 'Other', text: t('other')}
+      {val: comment.offensive, text: t('comment_offensive')},
+      {val: comment.spam, text: t('marketing')},
+      {val: comment.noagree, text: t('no_agree_comment')},
+      {val: comment.other, text: t('other')}
     ]
     : [
-      {val: 'This username is offensive', text: t('username_offensive')},
-      {val: 'I don\'t like this username', text: t('no_like_username')},
-      {val: 'This user is impersonating', text: t('user_impersonating')},
-      {val: 'This looks like an ad/marketing', text: t('marketing')},
-      {val: 'Other', text: t('other')}
+      {val: username.offensive, text: t('username_offensive')},
+      {val: username.nolike, text: t('no_like_username')},
+      {val: username.impersonating, text: t('user_impersonating')},
+      {val: username.spam, text: t('marketing')},
+      {val: username.other, text: t('other')}
     ];
     return {
       header: t('step_2_header'),

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-flags/helpers/flagReasons.js

@@ -0,0 +1,15 @@
+export default {
+  username: {
+    offensive: 'USERNAME_OFFENSIVE',
+    nolike: 'USERNAME_NOLIKE',
+    impersonating: 'USERNAME_IMPERSONATING',
+    spam: 'USERNAME_SPAM',
+    other: 'USERNAME_OTHER'
+  },
+  comment: {
+    offensive: 'COMMENT_OFFENSIVE',
+    spam: 'COMMENT_SPAM',
+    noagree: 'COMMENT_NOAGREE',
+    other: 'COMMENT_OTHER'
+  }
+};

client/coral-plugin-flags/index.js

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

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

@@ -29,12 +29,12 @@ const Comment = (props) => {
       <div className={styles.sidebar}>
         <ul>
           <li>
-            <a onClick={props.link(`${props.asset.url}#${props.comment.id}`)}>
-              <Icon name="open_in_new" />{t('view_conversation')}
+            <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
+              <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-permalinks/PermalinkButton.js

@@ -1,81 +0,0 @@
-import React, {PropTypes} from 'react';
-const name = 'coral-plugin-permalinks';
-import {Button} from 'coral-ui';
-import styles from './styles.css';
-import ClickOutside from 'coral-framework/components/ClickOutside';
-
-import t from 'coral-framework/services/i18n';
-
-export default class PermalinkButton extends React.Component {
-
-  static propTypes = {
-    articleURL: PropTypes.string.isRequired,
-    commentId: PropTypes.string.isRequired
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {popoverOpen: false, copySuccessful: null, copyFailure: null};
-    this.toggle = this.toggle.bind(this);
-    this.copyPermalink = this.copyPermalink.bind(this);
-  }
-
-  toggle () {
-
-    // I wish I could position this with a stylesheet, but top-level comments with
-    // nested replies throws everything off, as well as very long comments
-    this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
-    this.setState({popoverOpen: !this.state.popoverOpen});
-  }
-
-  handleClickOutside = () => {
-    this.setState({popoverOpen: false});
-  }
-
-  copyPermalink () {
-    this.permalinkInput.select();
-    try {
-      document.execCommand('copy');
-      this.setState({copySuccessful: true, copyFailure: null});
-    } catch (err) {
-      this.setState({copyFailure: true, copySuccessful: null});
-    }
-
-    setTimeout(() => {
-      this.setState({copyFailure: null, copySuccessful: null});
-    }, 3000);
-  }
-
-  render () {
-    const {copySuccessful, copyFailure} = this.state;
-    return (
-      <ClickOutside onClickOutside={this.handleClickOutside}>
-        <div className={`${name}-container`}>
-          <button
-            ref={(ref) => this.linkButton = ref}
-            onClick={this.toggle}
-            className={`${name}-button`}>
-            {t('permalink')}
-            <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
-          </button>
-          <div
-            ref={(ref) => this.popover = ref}
-            className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
-            <input
-              className={`${name}-copy-field`}
-              type='text'
-              ref={(input) => this.permalinkInput = input}
-              value={`${this.props.articleURL}#${this.props.commentId}`}
-              onChange={() => {}} />
-            <Button className={`${name}-copy-button ${copySuccessful ? styles.success : ''} ${copyFailure ? styles.failure : ''}`}
-                    onClick={this.copyPermalink} >
-              {!copyFailure && !copySuccessful && 'Copy'}
-              {copySuccessful && 'Copied'}
-              {copyFailure && 'Not supported'}
-            </Button>
-          </div>
-        </div>
-      </ClickOutside>
-    );
-  }
-}

client/coral-plugin-permalinks/styles.css

@@ -1,67 +0,0 @@
-.container {
-  border-radius: 3px;
-  padding: 15px 10px;
-  box-sizing: border-box;
-  /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */
-  border: solid 1px rgba(153, 153, 153, 0.33);
-  left: 0;
-  width: 100%;
-
-  &::before {
-    content: '';
-    border: 10px solid transparent;
-    border-top-color: white;
-    position: absolute;
-    right: 7em;
-    bottom: -20px;
-    z-index: 2;
-  }
-
-  &::after{
-    content: '';
-    border: 10px solid transparent;
-    border-top-color: rgba(153, 153, 153, 0.33);
-    position: absolute;
-    right: 7em;
-    bottom: -21px;
-    z-index: 1;
-  }
-
-  input {
-    display: inline-block;
-    width: calc(100% - 78px);
-    padding: 8px;
-    border-radius: 3px;
-    border: solid 1px #e0e0e0;
-    height: 32px;
-    box-sizing: border-box;
-    font-size: 1em;
-  }
-
-  button {
-    display: inline-block;
-    float: right;
-    box-sizing: border-box;
-    margin: 0;
-    background-color: #e0e0e0;
-    font-size: 1em;
-    width: auto;
-    height: auto;
-    padding: 2px;
-    transition: background-color 0.4s ease;
-
-    &:hover{
-      color: black;
-    }
-
-    &.success {
-      background-color: #00897B;
-      color: white;
-    }
-
-    &.failure {
-      background-color: #FF5252;
-      color: white;
-    }
-  }
-}

client/coral-plugin-replies/ReplyBox.js

@@ -18,7 +18,7 @@ class ReplyBox extends Component {
       styles,
       postComment,
       assetId,
-      authorId,
+      currentUser,
       addNotification,
       parentId,
       commentPostedHandler,
@@ -31,9 +31,9 @@ class ReplyBox extends Component {
         charCountEnable={charCountEnable}
         commentPostedHandler={commentPostedHandler}
         parentId={parentId}
-        cancelButtonClicked={this.cancelReply}
+        onCancel={this.cancelReply}
         addNotification={addNotification}
-        authorId={authorId}
+        currentUser={currentUser}
         assetId={assetId}
         postComment={postComment}
         isReply={true} />
@@ -48,7 +48,6 @@ ReplyBox.propTypes = {
   commentPostedHandler: PropTypes.func,
   parentId: PropTypes.string,
   addNotification: PropTypes.func.isRequired,
-  authorId: PropTypes.string.isRequired,
   postComment: PropTypes.func.isRequired,
   assetId: PropTypes.string.isRequired
 };

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';