Merge pull request #787 from coralproject/long-title

Fix for long titles in the All Streams Queue
Merge branch 'master' into long-title
2026-09-14 11:36:51 +08:00 · 2017-07-21 21:18:44 -04:00 · 2017-07-21 21:13:24 -04:00 · 2017-07-21 15:18:15 -04:00 · 2017-07-21 16:08:18 -03:00 · 2017-07-21 16:01:43 -03:00
102 changed files with 2129 additions and 903 deletions
@@ -13,5 +13,6 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-featured
+!plugins/talk-plugin-featured-comments
+
 node_modules
@@ -26,6 +26,6 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-featured
+!plugins/talk-plugin-featured-comments

 **/node_modules/*
@@ -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.
@@ -50,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.
@@ -74,7 +74,7 @@
  cursor: pointer;
  display: block;
  text-decoration: none;
-  height: 50px;
+  min-height: 50px;
  box-sizing: border-box;
  transition: background-color 400ms;

@@ -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);
@@ -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}}) => {
@@ -1,35 +1,24 @@
 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
@@ -125,8 +125,6 @@ class AllCommentsPane extends React.Component {
      root,
      comments,
      commentClassNames,
-      addTag,
-      removeTag,
      ignoreUser,
      setActiveReplyBox,
      activeReplyBox,
@@ -173,8 +171,6 @@ class AllCommentsPane extends React.Component {
                  currentUser={currentUser}
                  postFlag={postFlag}
                  postDontAgree={postDontAgree}
-                  addTag={addTag}
-                  removeTag={removeTag}
                  ignoreUser={ignoreUser}
                  commentIsIgnored={commentIsIgnored}
                  loadMore={loadNewReplies}
@@ -16,9 +16,8 @@
 }

 .comment {
+  position: relative;
  padding-left: 15px;
-  display: flex;
-  flex-flow: row;
 }

 .commentLevel0 {
@@ -67,17 +66,6 @@
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }

-/* element in the top right of the Comment */
-.topRight {
-  float: right;
-  margin-top: 10px;
-  text-align: right;
-}
-
-.topRight > * {
-  text-align: initial;
-}
-
 .topRight .popover {
  margin-top: 1em;
  right: 0px;
@@ -89,11 +77,6 @@
  border-bottom: 2px solid currentColor;
 }

-.topRightMenu {
-  cursor: pointer;
-  margin-top: 5px;
-}
-
 .editCommentForm {
  margin-bottom: 10px;
 }
@@ -144,7 +127,7 @@
 }

 .commentInfoBar {
-  float: right;
+  margin-left: auto;
 }

@keyframes enter {
@@ -158,7 +141,6 @@
 }

 .commentContainer {
-  flex: auto;
 }

 .commentAvatar {
@@ -173,3 +155,19 @@
  vertical-align: middle;
  font-size: 14px;
 }
+
+.commentFooter {
+  padding-top: 8px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.content {
+}
+
+.footer {
+
+}
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';

 import AuthorName from 'coral-plugin-author-name/AuthorName';
 import TagLabel from 'coral-plugin-tag-label/TagLabel';
@@ -13,13 +14,6 @@ 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';
@@ -178,19 +172,13 @@ 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) => {
@@ -303,6 +291,8 @@ export default class Comment extends React.Component {
  render () {
    const {
      asset,
+      data,
+      root,
      depth,
      comment,
      postFlag,
@@ -321,8 +311,6 @@ export default class Comment extends React.Component {
      addNotification,
      charCountEnable,
      showSignInDialog,
-      addTag,
-      removeTag,
      liveUpdates,
      commentIsIgnored,
      commentClassNames = []
@@ -347,40 +335,6 @@ export default class Comment extends React.Component {
      myFlag = dontAgreeSummary.find((s) => s.current_user);
    }

-    // 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'
-    );
-
    /**
     * conditionClassNames
     * adds classNames based on condition
@@ -424,6 +378,15 @@ export default class Comment extends React.Component {
      }
    );

+    // props that are passed down the slots.
+    const slotProps = {
+      data,
+      root,
+      asset,
+      comment,
+      depth,
+    };
+
    return (
      <div
        className={rootClassName}
@@ -434,196 +397,175 @@ export default class Comment extends React.Component {
          <Slot
            className={styles.commentAvatar}
            fill="commentAvatar"
-            comment={comment}
-            commentId={comment.id}
-            data={this.props.data}
-            root={this.props.root}
+            {...slotProps}
            inline
          />

          <div className={styles.commentContainer}>
-            
-            <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
-            {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}

-            {commentIsBest(comment)
-              ? <TagLabel><BestIndicator /></TagLabel>
-              : null }
+            <div className={styles.header}>
+              <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
+              {isStaff(comment.tags) ? <TagLabel>Staff</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>
-
-            <Slot
-              className={styles.commentInfoBar}
-              fill="commentInfoBar"
-              depth={depth}
-              comment={comment}
-              commentId={comment.id}
-              data={this.props.data}
-              root={this.props.root}
-              inline
-            />
-
-            { (currentUser && (comment.user.id === currentUser.id)) &&
-
-              /* User can edit/delete their own comment for a short window after posting */
-              <span className={cn(styles.topRight)}>
+              <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+                <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
                {
-                  commentIsStillEditable(comment) &&
-                  <a
-                    className={cn(styles.link, {[styles.active]: this.state.isEditing})}
-                    onClick={this.onClickEdit}>Edit</a>
+                  (comment.editing && comment.editing.edited)
+                  ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                  : null
                }
              </span>
-            }
-            { (currentUser && (comment.user.id !== currentUser.id)) &&

-                /* TopRightMenu allows currentUser to ignore other users' comments */
-                <span className={cn(styles.topRight, styles.topRightMenu)}>
-                  <TopRightMenu
-                    comment={comment}
-                    ignoreUser={ignoreUser}
-                    addNotification={addNotification} />
+              <Slot
+                className={styles.commentInfoBar}
+                fill="commentInfoBar"
+                {...slotProps}
+              />
+
+              { (currentUser && (comment.user.id === currentUser.id)) &&
+
+                /* User can edit/delete their own comment for a short window after posting */
+                <span className={cn(styles.topRight)}>
+                  {
+                    commentIsStillEditable(comment) &&
+                    <a
+                      className={cn(styles.link, {[styles.active]: this.state.isEditing})}
+                      onClick={this.onClickEdit}>Edit</a>
+                  }
                </span>
-            }
-            {
-              this.state.isEditing
-              ? <EditableCommentContent
-                  editComment={this.editComment}
-                  addNotification={addNotification}
-                  comment={comment}
-                  currentUser={currentUser}
-                  charCountEnable={charCountEnable}
-                  maxCharCount={maxCharCount}
-                  parentId={parentId}
-                  stopEditing={this.stopEditing}
-                  />
-              : <div>
-                  <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
-                </div>
-            }
+              }
+              { (currentUser && (comment.user.id !== currentUser.id)) &&

-            <div className="commentActionsLeft comment__action-container">
-              <Slot
-                fill="commentReactions"
-                data={this.props.data}
-                root={this.props.root}
-                comment={comment}
-                commentId={comment.id}
-                inline
-              />
-              <ActionButton>
-                <IfUserCanModifyBest user={currentUser}>
-                  <BestButton
-                    isBest={commentIsBest(comment)}
-                    addBest={addBestTag}
-                    removeBest={removeBestTag}
-                  />
-                </IfUserCanModifyBest>
-              </ActionButton>
-              {!disableReply &&
-                <ActionButton>
-                  <ReplyButton
-                    onClick={this.showReplyBox}
-                    parentCommentId={parentId || comment.id}
-                    currentUserId={currentUser && currentUser.id}
-                  />
-                </ActionButton>}
+                  /* 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="commentActionsRight comment__action-container">
-              <Slot
-                fill="commentActions"
-                wrapperComponent={ActionButton}
-                data={this.props.data}
-                root={this.props.root}
-                asset={asset}
-                comment={comment}
-                commentId={comment.id}
-                inline
-              />
-              <ActionButton>
-                <FlagComment
-                  flaggedByCurrentUser={!!myFlag}
-                  flag={myFlag}
-                  id={comment.id}
-                  author_id={comment.user.id}
-                  postFlag={postFlag}
-                  addNotification={addNotification}
-                  postDontAgree={postDontAgree}
-                  deleteAction={deleteAction}
-                  showSignInDialog={showSignInDialog}
-                  currentUser={currentUser}
+            <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
                />
-              </ActionButton>
+                {!disableReply &&
+                  <ActionButton>
+                    <ReplyButton
+                      onClick={this.showReplyBox}
+                      parentCommentId={parentId || comment.id}
+                      currentUserId={currentUser && currentUser.id}
+                    />
+                  </ActionButton>}
+              </div>
+              <div className="commentActionsRight comment__action-container">
+                <Slot
+                  fill="commentActions"
+                  wrapperComponent={ActionButton}
+                  {...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={() => {
-                  setActiveReplyBox('');
-                }}
+        {activeReplyBox === comment.id
+          ? <ReplyBox
+              commentPostedHandler={() => {
+                setActiveReplyBox('');
+              }}
+              charCountEnable={charCountEnable}
+              maxCharCount={maxCharCount}
+              setActiveReplyBox={setActiveReplyBox}
+              parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
+              addNotification={addNotification}
+              postComment={postComment}
+              currentUser={currentUser}
+              assetId={asset.id}
+            />
+          : null}
+
+        <TransitionGroup>
+        {view.map((reply) => {
+          return commentIsIgnored(reply)
+            ? <IgnoredCommentTombstone key={reply.id} />
+            : <Comment
+                data={this.props.data}
+                root={this.props.root}
+                setActiveReplyBox={setActiveReplyBox}
+                disableReply={disableReply}
+                activeReplyBox={activeReplyBox}
+                addNotification={addNotification}
+                parentId={comment.id}
+                postComment={postComment}
+                editComment={this.props.editComment}
+                depth={depth + 1}
+                asset={asset}
+                highlighted={highlighted}
+                currentUser={currentUser}
+                postFlag={postFlag}
+                deleteAction={deleteAction}
+                loadMore={loadMore}
+                ignoreUser={ignoreUser}
                charCountEnable={charCountEnable}
                maxCharCount={maxCharCount}
-                setActiveReplyBox={setActiveReplyBox}
-                parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
-                addNotification={addNotification}
-                postComment={postComment}
-                currentUser={currentUser}
-                assetId={asset.id}
-              />
-            : null}
-
-          <TransitionGroup>
-          {view.map((reply) => {
-            return commentIsIgnored(reply)
-              ? <IgnoredCommentTombstone key={reply.id} />
-              : <Comment
-                  data={this.props.data}
-                  root={this.props.root}
-                  setActiveReplyBox={setActiveReplyBox}
-                  disableReply={disableReply}
-                  activeReplyBox={activeReplyBox}
-                  addNotification={addNotification}
-                  parentId={comment.id}
-                  postComment={postComment}
-                  editComment={this.props.editComment}
-                  depth={depth + 1}
-                  asset={asset}
-                  highlighted={highlighted}
-                  currentUser={currentUser}
-                  postFlag={postFlag}
-                  deleteAction={deleteAction}
-                  addTag={addTag}
-                  removeTag={removeTag}
-                  loadMore={loadMore}
-                  ignoreUser={ignoreUser}
-                  charCountEnable={charCountEnable}
-                  maxCharCount={maxCharCount}
-                  showSignInDialog={showSignInDialog}
-                  commentIsIgnored={commentIsIgnored}
-                  liveUpdates={liveUpdates}
-                  reactKey={reply.id}
-                  key={reply.id}
-                  comment={reply}
-                />;
-          })}
-          </TransitionGroup>
-          <div className="talk-load-more-replies">
-            <LoadMore
-              topLevel={false}
-              replyCount={moreRepliesCount}
-              moreComments={hasMoreComments}
-              loadMore={this.loadNewReplies}
-              loadingState={loadingState}
-            />
+                showSignInDialog={showSignInDialog}
+                commentIsIgnored={commentIsIgnored}
+                liveUpdates={liveUpdates}
+                reactKey={reply.id}
+                key={reply.id}
+                comment={reply}
+              />;
+        })}
+        </TransitionGroup>
+        <div className="talk-load-more-replies">
+          <LoadMore
+            topLevel={false}
+            replyCount={moreRepliesCount}
+            moreComments={hasMoreComments}
+            loadMore={this.loadNewReplies}
+            loadingState={loadingState}
+          />
        </div>
      </div>
    );
@@ -6,6 +6,8 @@ import t from 'coral-framework/services/i18n';

 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';
@@ -26,12 +28,24 @@ export default class Embed extends React.Component {
  };

  render() {
-    const {activeTab, commentId} = this.props;
+    const {activeTab, commentId, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog} = this.props;
    const {user} = this.props.auth;
    const hasHighlightedComment = !!commentId;

    return (
      <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}
@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import {StreamError} from './StreamError';
 import Comment from '../components/Comment';
 import SuspendedAccount from './SuspendedAccount';
@@ -35,6 +36,29 @@ class Stream extends React.Component {
    if (!this.userIsDegraged(this.props) && this.userIsDegraged(next)) {
      this.setState({keepCommentBox: true});
    }
+
+    this.fallbackAllTab(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');
+      }
+    }
+  }
+
+  getSlotProps({data, root, root: {asset}} = this.props) {
+    return {data, root, asset};
+  }
+
+  getSlotComponents(slot, props = this.props) {
+    return getSlotComponents(slot, props.reduxState, this.getSlotProps(props));
  }

  setActiveReplyBox = (id) => {
@@ -66,7 +90,6 @@ class Stream extends React.Component {
      deleteAction,
      showSignInDialog,
      updateItem,
-      addTag,
      ignoreUser,
      activeStreamTab,
      setActiveStreamTab,
@@ -74,7 +97,6 @@ class Stream extends React.Component {
      loadMoreComments,
      viewAllComments,
      auth: {loggedIn, user},
-      removeTag,
      editName
    } = this.props;
    const {keepCommentBox} = this.state;
@@ -98,6 +120,7 @@ class Stream extends React.Component {
    };

    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.');
@@ -156,7 +179,10 @@ class Stream extends React.Component {
            </div>
          : <p>{asset.settings.closedMessage}</p>}

-        <Slot fill="stream" />
+        <Slot
+          fill="stream"
+          {...slotProps}
+        />

        {loggedIn && (
          <ModerationLink
@@ -173,8 +199,6 @@ class Stream extends React.Component {
                data={data}
                root={root}
                commentClassNames={commentClassNames}
-                addTag={addTag}
-                removeTag={removeTag}
                ignoreUser={ignoreUser}
                setActiveReplyBox={setActiveReplyBox}
                activeReplyBox={activeReplyBox}
@@ -204,16 +228,17 @@ class Stream extends React.Component {
              <div
                className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
              >
-                <Slot fill="streamFilter" />
+                <Slot
+                  fill="streamFilter"
+                  {...slotProps}
+                />
              </div>
              <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
-                {getSlotComponents('streamTabs').map((PluginComponent) => (
+                {this.getSlotComponents('streamTabs').map((PluginComponent) => (
                  <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
                    <PluginComponent
+                      {...slotProps}
                      active={activeStreamTab === PluginComponent.talkPluginName}
-                      data={data}
-                      root={root}
-                      asset={asset}
                    />
                  </Tab>
                ))}
@@ -222,12 +247,10 @@ class Stream extends React.Component {
                </Tab>
              </TabBar>
              <TabContent activeTab={activeStreamTab} sub>
-                {getSlotComponents('streamTabPanes').map((PluginComponent) => (
+                {this.getSlotComponents('streamTabPanes').map((PluginComponent) => (
                  <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
                    <PluginComponent
-                      data={data}
-                      root={root}
-                      asset={asset}
+                      {...slotProps}
                    />
                  </TabPane>
                ))}
@@ -237,8 +260,6 @@ class Stream extends React.Component {
                    root={root}
                    comments={comments}
                    commentClassNames={commentClassNames}
-                    addTag={addTag}
-                    removeTag={removeTag}
                    ignoreUser={ignoreUser}
                    setActiveReplyBox={setActiveReplyBox}
                    activeReplyBox={activeReplyBox}
@@ -271,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,

@@ -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;
@@ -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>
@@ -1,6 +1,7 @@
 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;
@@ -1,9 +1,9 @@
 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',
@@ -12,15 +12,20 @@ const pluginFragments = getSlotsFragments([
  'commentContent',
  '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 {
@@ -28,6 +33,7 @@ export default withFragments({
      body
      created_at
      status
+      replyCount
      tags {
        tag {
          name
@@ -48,8 +54,7 @@ export default withFragments({
        edited
        editableUntil
      }
-      ${pluginFragments.spreads('comment')}
+      ${getSlotFragmentSpreads(slots, 'comment')}
    }
-    ${pluginFragments.definitions('comment')}
  `
 })(Comment);
@@ -19,7 +19,7 @@ import t from 'coral-framework/services/i18n';

 import {setActiveTab} from '../actions/embed';

-const {logout, checkLogin} = authActions;
+const {logout, checkLogin, focusSignInDialog, blurSignInDialog, hideSignInDialog} = authActions;
 const {fetchAssetSuccess} = assetActions;

 class EmbedContainer extends React.Component {
@@ -94,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);
    }
  }

@@ -185,6 +185,9 @@ const mapDispatchToProps = (dispatch) =>
      setActiveTab,
      fetchAssetSuccess,
      addNotification,
+      focusSignInDialog,
+      blurSignInDialog,
+      hideSignInDialog,
    },
    dispatch
  );
@@ -4,8 +4,8 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 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 * as authActions from 'coral-framework/actions/auth';
@@ -15,9 +15,8 @@ import {setActiveReplyBox, setActiveTab, viewAllComments} from '../actions/strea
 import Stream from '../components/Stream';
 import Comment from './Comment';
 import {withFragments} from 'coral-framework/hocs';
-import {getSlotsFragments} from 'coral-framework/helpers/plugins';
+import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {Spinner} from 'coral-ui';
-import {getDefinitionName} from 'coral-framework/utils';
 import {
  findCommentInEmbedQuery,
  insertCommentIntoEmbedQuery,
@@ -25,6 +24,7 @@ import {
  insertFetchedCommentsIntoEmbedQuery,
  nest,
 } from '../graphql/utils';
+import omit from 'lodash/omit';

 const {showSignInDialog} = authActions;
 const {addNotification} = notificationActions;
@@ -159,7 +159,6 @@ const commentFragment = gql`
    id
    ...${getDefinitionName(Comment.fragments.comment)}
    ${nest(`
-      replyCount(excludeIgnored: $excludeIgnored)
      replies(excludeIgnored: $excludeIgnored) {
        nodes {
          id
@@ -210,7 +209,6 @@ const LOAD_MORE_QUERY = gql`
        id
        ...${getDefinitionName(Comment.fragments.comment)}
        ${nest(`
-          replyCount(excludeIgnored: $excludeIgnored)
          replies(limit: 3, excludeIgnored: $excludeIgnored) {
            nodes {
              id
@@ -231,10 +229,10 @@ const LOAD_MORE_QUERY = gql`
  ${Comment.fragments.comment}
 `;

-const pluginFragments = getSlotsFragments([
+const slots = [
  'streamTabs',
  'streamTabPanes',
-]);
+];

 const fragments = {
  root: gql`
@@ -277,7 +275,8 @@ const fragments = {
          startCursor
          endCursor
        }
-        ${pluginFragments.spreads('asset')}
+        ${getSlotFragmentSpreads(slots, 'asset')}
+        ...${getDefinitionName(Comment.fragments.asset)}
      }
      me {
        status
@@ -288,11 +287,10 @@ const fragments = {
      settings {
        organizationName
      }
-      ${pluginFragments.spreads('root')}
+      ${getSlotFragmentSpreads(slots, 'root')}
      ...${getDefinitionName(Comment.fragments.root)}
    }
-    ${pluginFragments.definitions('asset')}
-    ${pluginFragments.definitions('root')}
+    ${Comment.fragments.asset}
    ${Comment.fragments.root}
    ${commentFragment}
  `,
@@ -310,7 +308,9 @@ const mapStateToProps = (state) => ({
  previousTab: state.embed.previousTab,
  activeStreamTab: state.stream.activeTab,
  previousStreamTab: state.stream.previousTab,
-  commentClassNames: state.stream.commentClassNames
+  commentClassNames: state.stream.commentClassNames,
+  pluginConfig: state.config.plugin_config,
+  reduxState: omit(state, 'apollo'),
 });

 const mapDispatchToProps = (dispatch) =>
@@ -329,8 +329,6 @@ export default compose(
  withPostComment,
  withPostFlag,
  withPostDontAgree,
-  withAddTag,
-  withRemoveTag,
  withIgnoreUser,
  withDeleteAction,
  withEditComment,
@@ -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,
@@ -1,4 +1,6 @@
 import update from 'immutability-helper';
+import {insertCommentsSorted} from 'coral-framework/utils';
+
 function determineCommentDepth(comment) {
  let depth = 0;
  let cur = comment;
@@ -142,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';
@@ -162,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);
+          ));
        }},
      },
    });
@@ -17,11 +17,11 @@ function getQueryVariable(variable) {

 const initialState = {
  activeReplyBox: '',
-  assetId: getQueryVariable('asset_id'),
-  assetUrl: getQueryVariable('asset_url'),
-  commentId: getQueryVariable('comment_id'),
+  assetId: getQueryVariable('asset_id') || '',
+  assetUrl: getQueryVariable('asset_url') || '',
+  commentId: getQueryVariable('comment_id') || '',
  commentClassNames: [],
-  activeTab: 'all',
+  activeTab: process.env.TALK_DEFAULT_STREAM_TAB,
  previousTab: '',
 };

@@ -48,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,
@@ -1,7 +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 = {
@@ -39,7 +40,7 @@ function buildStreamIframeUrl(talkBaseUrl, query) {
    'embed/stream?'
  ].join('');

-  url += stringify(query);
+  url += queryString.stringify(query);

  return url;
 }
@@ -98,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,
    );
  });

@@ -193,12 +221,18 @@ Talk.render = function(el, opts) {

  let urlParams = new URLSearchParams(window.location.search);

-  query.comment_id = urlParams.get('commentId');
+  if (urlParams.get('commentId')) {
+    query.comment_id = urlParams.get('commentId');
+  }

-  query.asset_id = opts.asset_id;
+  if (opts.asset_id) {
+    query.asset_id = opts.asset_id;
+  }

-  query.asset_url = opts.asset_url;
-  if (!query.asset_url) {
+  if (opts.asset_url) {
+    query.asset_url = opts.asset_url;
+  }
+  else {
    try {
      query.asset_url = document.querySelector('link[rel="canonical"]').href;
    } catch (e) {
@@ -7,45 +7,33 @@ import pym from '../services/pym';

 import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
-import {isSlotEmpty} from 'plugin-api/beta/client/services';

-export const showSignInDialog = () => (dispatch, getState) => {
-  if (isSlotEmpty('login')) {
-    return;
-  }
-  const signInPopUp = window.open(
-    '/embed/stream/login',
-    'Login',
-    '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
 });
@@ -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);
+
@@ -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);
+
@@ -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,
+};
@@ -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);

@@ -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';
@@ -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!) {
@@ -2,95 +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, getStore} from 'coral-framework/services/store';
+import {injectReducers} from 'coral-framework/services/store';
 import camelize from './camelize';
+import plugins from 'pluginsConfig';

-export function getSlotComponents(slot) {
-  const pluginConfig = getStore().getState().config.plugin_config;
-
+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 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) {
-  return getSlotComponents(slot).length === 0;
+export function isSlotEmpty(slot, reduxState, props) {
+  return getSlotComponents(slot, reduxState, props).length === 0;
 }

 /**
 * Returns React Elements for given slot.
 */
-export function getSlotElements(slot, props = {}) {
-  return getSlotComponents(slot)
-    .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 ? o.module.slots[slot] : false)
-      .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() {
@@ -0,0 +1,6 @@
+import {connect} from 'react-redux';
+
+export default (mapStateToProps, ...rest) => (BaseComponent) => {
+  BaseComponent.mapStateToProps = mapStateToProps;
+  return connect(mapStateToProps, ...rest)(BaseComponent);
+};
@@ -0,0 +1,4 @@
+export default (condition) => (BaseComponent) => {
+  BaseComponent.isExcluded = condition;
+  return BaseComponent;
+};
@@ -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;
 };
@@ -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;
  };
@@ -7,6 +7,7 @@ const initialState = Map({
  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,
@@ -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.');
  }
@@ -7,7 +7,6 @@
  touch-action: manipulation;
  padding: 0;

-  position: relative;
  overflow: hidden;

  /* Unify anchor and button. */
@@ -18,7 +17,7 @@
  text-decoration: none;
  align-items: flex-start;
  vertical-align: middle;
-  whiteSpace: nowrap;
+  white-space: nowrap;
  background: transparent;
  font-size: inherit;

@@ -1,5 +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
@@ -144,3 +145,45 @@ export function forEachError(error, callback) {
    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`;
+}
@@ -1,14 +0,0 @@
-.button {
-  composes: buttonReset from "coral-framework/styles/reset.css";
-  margin: 5px 10px 5px 0px;
-}
-
-.tagIcon {
-  font-size: 12px;
-  vertical-align: middle;
-}
-
-.icon {
-  font-size: 12px;
-  vertical-align: middle;
-}
@@ -1,105 +0,0 @@
-import React, {Component, PropTypes} from 'react';
-
-import t from 'coral-framework/services/i18n';
-
-import {Icon} from 'coral-ui';
-import cn from 'classnames';
-import styles from './BestButton.css';
-
-// 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' className={styles.tagIcon} />}) => (
-  <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={cn(styles.button, `${name}-button`, `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
-              aria-label={t(isBest ? 'unset_best' : 'set_best')}>
-        <Icon name={ isBest ? 'star' : 'star_border' } className={styles.icon} />
-      </button>
-    );
-  }
-}
@@ -77,7 +77,15 @@ const CONFIG = {
  SMTP_HOST: process.env.TALK_SMTP_HOST,
  SMTP_PASSWORD: process.env.TALK_SMTP_PASSWORD,
  SMTP_PORT: process.env.TALK_SMTP_PORT,
-  SMTP_USERNAME: process.env.TALK_SMTP_USERNAME
+  SMTP_USERNAME: process.env.TALK_SMTP_USERNAME,
+
+  //------------------------------------------------------------------------------
+  // Flagging Config
+  //------------------------------------------------------------------------------
+
+  // DISABLE_AUTOFLAG_SUSPECT_WORDS is true when the suspect words that are
+  // matched should not be flagged.
+  DISABLE_AUTOFLAG_SUSPECT_WORDS: process.env.TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS === 'TRUE'
 };

 //==============================================================================
@@ -36,6 +36,9 @@ entries:
    - title: Setup
      url: /install-setup.html
      output: web
+    - title: Microservice Deployments
+      url: /install-microservices.html
+      output: web
    - title: Troubleshooting
      url: /install-troubleshooting.html
      output: web
@@ -17,7 +17,7 @@ sign and verify tokens via a `HS256` algorithm.
 - `TALK_JWT_EXPIRY` (_optional_) - the expiry duration (`exp`) for the tokens issued for logged in sessions (Default `1 day`)
 - `TALK_JWT_ISSUER` (_optional_) - the issuer (`iss`) claim for login JWT tokens (Default `process.env.TALK_ROOT_URL`)
 - `TALK_JWT_AUDIENCE` (_optional_) - the audience (`aud`) claim for login JWT tokens (Default `talk`)
- `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
+- `TALK_SMTP_FROM_ADDRESS` (*required for email*) - the address to send emails from using the
  SMTP provider.
 - `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
 - `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
@@ -0,0 +1,98 @@
+---
+title: Microservice Deployments
+keywords: install
+sidebar: talk_sidebar
+permalink: install-microservices.html
+summary:
+---
+
+In Talk, we seek to deliver the simplicity of a monolith with the advantages of
+a microservice based infrastructure for those who want them.
+
+To accomplish this, Talk has the ability to run with subsets of its overall
+functionality and contains architecture that allows them to operate logically as
+microservices when running in a single environment.
+
+## Talk Server Functionalities
+
+The Talk server serves several logically/architecturally distinct functions:
+
+* A web server that
+  * serves "public" assets (aka, the comment embed)
+  * the GraphQL endpoints
+* A web socket server that handles subscriptions.
+* A jobs processor that handles queued operations.
+
+In the documentation so far, we've discussed how to deploy all of these
+functionalities bundled into a single monolith application. This is convenient
+as there is minimal configuration and horizontal scaling is as easy as upping
+the number of servers behind a single load balancer.
+
+## Separating Talk into Microservices
+
+Talk can be run in two or more separate clusters of servers by
+enabling/disabling different bits of functionality: webserver, socket server and
+jobs server.
+
+Each microservice would deploy with the same codebase and configuration.
+
+Note that the `cli serve` command, which is responsible for starting the server,
+contains flags that control whether `jobs` and `websockets` are enabled.
+
+```
+talk :) ]$ bin/cli serve --help
+
+  Options:
+
+    ...
+    -j, --jobs           enable job processing on this thread
+    -w, --websockets     enable the websocket (subscriptions) handler on this thread
+    ...
+```
+
+Each Talk Microservice cluster can be deployed in an identical manner described
+in the other docs in this section with the omission of the `-j` and/or `-w`
+flags.
+
+With routing logic in front of the webserver cluster, separation between public
+and protected assets can be achieved.
+
+## When should I consider separating?
+
+Consider a microservice deployment if:
+
+* you are running plugins that require intensive job processing
+* you do not want to simplicity of single cluster horizontal scaling and want to
+  tune the economy and performance of your install.
+* You run into scaling issues serving websockets
+
+At scale, combining separate concerns in a single process makes it very
+difficult to understand what is taking up resources. With microservices, each
+server could be configured to sit behind it's own load balance and scale
+independently. Each variety of process can always have just enough resources.
+
+An install that heavily utilizes the jobs queue could see delays in http service
+because of heavy jobs processes and/or delays in the execution of jobs processes
+due to increased server load as a result of Node's single thread infrustructure.
+
+## Deployment Methodologies
+
+Note that there is no flag to separate the http routes on the webserver.
+Separating the http server functionalities can be accomplished by the routing of
+various routes to the correct http server via an external upstream proxy like
+Google Cloud's Load Balancer, AWS's ELB, or a websever like NGINX/Apache. This
+can ensure that sensitive areas, such as the `/admin/` route are not available
+outside the firewall.
+
+Talk's job processors are synchronized by Redis, so as long as all Talk
+instances access the same Redis cluster no additional configuration is needed
+when launching an independent jobs cluster.
+
+If there are any features of Talk that you believe should be disable-able via
+server flags, please let us know and consider contributing it to the project!
+
+## Deployment Flows/Scripts
+
+We do not currently support any microservice based deployment flows. If you
+develop one yourself that is completely based on open source tooling, please
+consider contributing it to the project!
@@ -15,6 +15,10 @@ const {
  EDIT_COMMENT
 } = require('../../perms/constants');

+const {
+  DISABLE_AUTOFLAG_SUSPECT_WORDS
+} = require('../../config');
+
 const debug = require('debug')('talk:graph:mutators:tags');
 const plugins = require('../../services/plugins');

@@ -297,7 +301,10 @@ const createPublicComment = async (context, commentInput) => {
  // Otherwise just return the new comment.

  // TODO: Check why the wordlist is undefined
-  if (wordlist != null && wordlist.suspect != null) {
+
+  // If the wordlist has matched the suspect word filter and we haven't disabled
+  // auto-flagging suspect words, then we should flag the comment!
+  if (wordlist != null && wordlist.suspect != null && !DISABLE_AUTOFLAG_SUSPECT_WORDS) {

    // TODO: this is kind of fragile, we should refactor this to resolve
    // all these const's that we're using like 'COMMENTS', 'FLAG' to be
@@ -32,7 +32,6 @@ en:
    comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly."
    comment_post_banned_word:  "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team."
    characters_remaining: "characters remaining"
-  comment_is_best: "This comment is one of the best"
  comment_offensive: "This comment is offensive"
  comment_singular: Comment
  comment_plural: Comments
@@ -306,7 +305,6 @@ en:
  report_notif: "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly."
  report_notif_remove: "Your report has been removed."
  reported: Reported
-  set_best: "Tag as Best"
  settings:
    all_comments: "All Comments"
    from_settings_page: "From the Profile Page you can see your comment history."
@@ -363,7 +361,6 @@ en:
    write_message: "Write a message"
    send: Send
  thank_you: "We value your safety and feedback. A moderator will review your report."
-  unset_best: "Untag as Best"
  user:
    bio_flags: "flags for this bio"
    user_bio: "User Bio"
@@ -32,7 +32,6 @@ es:
    comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto."
    comment_post_banned_word: "Tu comentario contiene una o más palabras que no están permitidas en nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación."
    characters_remaining: "carácteres restantes"
-  comment_is_best: "Este comentario es uno de los mejores"
  comment_offensive: "Este comentario es ofensivo"
  comment_singular: Comentario
  comment_plural: Comentarios
@@ -298,7 +297,6 @@ es:
  report_notif: "Gracias por reportar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar."
  report_notif_remove: "Tu reporte ha sido eliminado."
  reported: "Reportado"
-  set_best: "Etiquetar como el mejor"
  settings:
    all_comments: "Todos los comentarios"
    from_settings_page: "Desde la página de configuración puedes ver tu historial de comentarios."
@@ -386,7 +384,6 @@ es:
    write_message: "Escribir un mensaje"
    send: "Enviar"
  thank_you: "Valoramos tanto su seguridad en este espacio como sus comentarios. Un o una moderadora va a leer su reporte."
-  unset_best: "Des-etiquetar como el mejor"
  user:
    bio_flags: "reportes para este bio"
    user_bio: "Bio de Usuario"
@@ -1,6 +1,6 @@
 {
  "name": "talk",
-  "version": "2.4.0",
+  "version": "2.5.0",
  "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
  "main": "app.js",
  "scripts": {
@@ -111,6 +111,7 @@
    "passport-jwt": "^2.2.1",
    "passport-local": "^1.0.0",
    "prop-types": "^15.5.10",
+    "query-strings": "^0.0.1",
    "react-apollo": "^1.1.0",
    "react-input-autosize": "^1.1.4",
    "react-recaptcha": "^2.2.6",
@@ -0,0 +1 @@
+export {addNotification} from 'coral-framework/actions/notification';
@@ -1,2 +1,5 @@
 export {default as withReaction} from './withReaction';
+export {default as withTags} from './withTags';
 export {default as withFragments} from 'coral-framework/hocs/withFragments';
+export {default as excludeIf} from 'coral-framework/hocs/excludeIf';
+export {default as connect} from 'coral-framework/hocs/connect';
@@ -1,7 +1,7 @@
 import React from 'react';
 import get from 'lodash/get';
 import uuid from 'uuid/v4';
-import {connect} from 'react-redux';
+import {connect} from 'plugin-api/beta/client/hocs';
 import {bindActionCreators} from 'redux';
 import {getDisplayName} from 'coral-framework/helpers/hoc';
 import {compose, gql} from 'react-apollo';
@@ -0,0 +1,111 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import {getDisplayName} from 'coral-framework/helpers/hoc';
+import {capitalize} from 'coral-framework/helpers/strings';
+import {withAddTag, withRemoveTag} from 'coral-framework/graphql/mutations';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {addNotification} from 'coral-framework/actions/notification';
+import {forEachError, isTagged} from 'coral-framework/utils';
+
+export default (tag) => (WrappedComponent) => {
+  if (typeof tag !== 'string') {
+    console.error('Tag must be a valid string');
+    return null;
+  }
+
+  const Tag = capitalize(tag);
+  const TAG = tag.toUpperCase();
+
+  class WithTags extends React.Component {
+    loading = false;
+
+    postTag = () => {
+      const {comment, asset, addNotification} = this.props;
+
+      if (this.loading) {
+        return;
+      }
+
+      this.loading = true;
+
+      this.props.addTag({
+        id: comment.id,
+        name: TAG,
+        assetId: asset.id,
+        itemType: 'COMMENTS',
+      })
+      .then(() => {
+        this.loading = false;
+      })
+      .catch((err) => {
+        this.loading = false;
+        forEachError(err, ({msg}) => addNotification('error', msg));
+      });
+    }
+
+    deleteTag = () => {
+      const {comment, asset, addNotification} = this.props;
+
+      if (this.loading) {
+        return;
+      }
+
+      this.props.removeTag({
+        id: comment.id,
+        name: TAG,
+        assetId: asset.id,
+        itemType: 'COMMENTS',
+      })
+      .then(() => {
+        this.loading = false;
+      })
+      .catch((err) => {
+        this.loading = false;
+        forEachError(err, ({msg}) => addNotification('error', msg));
+      });
+    }
+
+    render() {
+      const {comment} = this.props;
+
+      const alreadyTagged = isTagged(comment.tags, TAG);
+
+      return <WrappedComponent
+        user={this.props.user}
+        comment={comment}
+        alreadyTagged={alreadyTagged}
+        postTag={this.postTag}
+        deleteTag={this.deleteTag}
+      />;
+    }
+  }
+
+  const mapStateToProps = (state) => ({
+    user: state.auth.toJS().user,
+  });
+
+  const mapDispatchToProps = (dispatch) =>
+    bindActionCreators({addNotification}, dispatch);
+
+  const enhance = compose(
+    withFragments({
+      comment: gql`
+        fragment ${Tag}Button_comment on Comment {
+          tags {
+            tag {
+              name
+            }
+          }
+        }`
+    }),
+    connect(mapStateToProps, mapDispatchToProps),
+    withAddTag,
+    withRemoveTag
+  );
+
+  WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`;
+
+  return enhance(WithTags);
+};
@@ -0,0 +1 @@
+export const pluginConfigSelector = (state) => state.config.pluginConfig;
@@ -1,3 +1,9 @@
-export {t} from 'coral-framework/services/i18n';
+export {t, timeago} from 'coral-framework/services/i18n';
 export {can} from 'coral-framework/services/perms';
-export {isSlotEmpty} from 'coral-framework/helpers/plugins';
+import {isSlotEmpty as ise} from 'coral-framework/helpers/plugins';
+
+// @TODO: Deprecated.
+export function isSlotEmpty(...args) {
+  console.warn('A plugin is using `isSlotEmpty` which has been deprecated, please port to the new API using the `IfSlotIsEmpty` and `IfSlotIsNotEmpty` components.');
+  return ise(...args);
+}
@@ -0,0 +1,7 @@
+export {
+  isTagged,
+  insertCommentsSorted,
+  getSlotFragmentSpreads,
+  forEachError,
+  getDefinitionName,
+} from 'coral-framework/utils';
@@ -1,18 +1,18 @@
 {
  "server": [
    "coral-plugin-auth",
-    "coral-plugin-like",
    "coral-plugin-respect",
    "coral-plugin-offtopic",
-    "coral-plugin-facebook-auth"
+    "coral-plugin-facebook-auth",
+    "talk-plugin-featured-comments"
  ],
  "client": [
    "coral-plugin-respect",
-    "coral-plugin-like",
    "coral-plugin-auth",
    "coral-plugin-offtopic",
    "coral-plugin-viewing-options",
    "coral-plugin-comment-content",
-    "talk-plugin-permalink"
+    "talk-plugin-permalink",
+    "talk-plugin-featured-comments"
  ]
 }
@@ -9,6 +9,7 @@
  padding: 0px;
  border: none;
  font-size: inherit;
+  vertical-align: middle;

  &:hover {
    color: #767676;
@@ -1,13 +1,12 @@
 import React from 'react';
 import styles from './styles.css';
 import {t} from 'plugin-api/beta/client/services';
-
-const isOffTopic = (tags) => !!tags.filter((t) => t.tag.name === 'OFF_TOPIC').length;
+import {isTagged} from 'plugin-api/beta/client/utils';

 export default (props) => (
  <span>
    {
-      isOffTopic(props.comment.tags) && props.depth === 0 ? (
+      isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
        <span className={styles.tag}>
          {t('off_topic')}
        </span>
@@ -1,7 +1,7 @@
-import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {addTag, removeTag} from 'plugin-api/alpha/client/actions';
 import {commentBoxTagsSelector} from 'plugin-api/alpha/client/selectors';
+import {connect} from 'plugin-api/beta/client/hocs';
 import OffTopicCheckbox from '../components/OffTopicCheckbox';

 const mapStateToProps = (state) => ({
@@ -1,4 +1,4 @@
-import {connect} from 'react-redux';
+import {connect} from 'plugin-api/beta/client/hocs';
 import {bindActionCreators} from 'redux';
 import {toggleCheckbox} from '../actions';
 import {commentClassNamesSelector} from 'plugin-api/alpha/client/selectors';
@@ -9,6 +9,7 @@
  padding: 0px;
  border: none;
  font-size: inherit;
+  vertical-align: middle;

  &:hover {
    color: #767676;
@@ -1,4 +1,4 @@
-import {connect} from 'react-redux';
+import {connect} from 'plugin-api/beta/client/hocs';
 import {bindActionCreators} from 'redux';
 import ViewingOptions from '../components/ViewingOptions';
 import {openViewingOptions, closeViewingOptions} from '../actions';
@@ -11,4 +11,4 @@
    "transform-async-to-generator",
    "transform-react-jsx"
  ]
-}
+}
@@ -0,0 +1,9 @@
+import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
+
+export const showTooltip = () => ({
+  type: SHOW_TOOLTIP
+});
+
+export const hideTooltip = () => ({
+  type: HIDE_TOOLTIP
+});
@@ -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"
+  ]
+}
@@ -0,0 +1,17 @@
+.button {
+
+  /* TODO: figure out the best location to include the `reset.css` */
+  composes: buttonReset from "coral-framework/styles/reset.css";
+
+  color: #767676;
+  margin-right: 10px;
+}
+
+.button.featured {
+  color: #10589b;
+}
+
+.icon {
+  font-size: 18px;
+  vertical-align: top;
+}
@@ -0,0 +1,27 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Button.css';
+import {pluginName} from '../../package.json';
+import {can} from 'plugin-api/beta/client/services';
+import {withTags} from 'plugin-api/beta/client/hocs';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+const Button = (props) => {
+  const {alreadyTagged, deleteTag, postTag, user} = props;
+
+  return can(user, 'MODERATE_COMMENTS') ? (
+    <button
+      className={cn([`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged}])}
+      onClick={alreadyTagged ? deleteTag : postTag} >
+
+      {alreadyTagged ?
+        <Icon name="star" className={styles.icon} /> :
+        <Icon name="star_border" className={styles.icon} />
+      }
+
+    </button>
+  ) : null ;
+};
+
+export default withTags('featured')(Button);
+
@@ -0,0 +1,67 @@
+.root {
+  margin: 10px 0 35px;
+}
+
+.root:last-child {
+  margin: 10px 0;
+}
+
+.goTo {
+  color: #1d5294;
+  font-size: 13px;
+  padding: 5px 0;
+  display: inline-block;
+}
+
+.repliesIcon {
+  font-size: 16px;
+  vertical-align: middle;
+  line-height: 13px;
+  font-weight: bold;
+}
+
+.goToIcon {
+  font-size: 16px;
+  vertical-align: middle;
+  line-height: 13px;
+  font-weight: bold;
+}
+
+.goTo {
+
+  /* TODO: figure out the best location to include the `reset.css` */
+  composes: buttonReset from "coral-framework/styles/reset.css";
+}
+
+.goTo:hover {
+  text-decoration: underline;
+}
+
+.quote {
+  line-height: 20px;
+  text-align: left;
+  letter-spacing: 0.1px;
+  margin: 0;
+  quotes: '\201c' '\201d';
+  margin-bottom: 10px;
+}
+
+.quote:before {
+  content: open-quote;
+}
+
+.quote:after  {
+  content: close-quote;
+}
+
+.footer {
+  display: flex;
+}
+
+.reactionsContainer, .actionsContainer {
+  flex: auto;
+}
+
+.actionsContainer {
+  text-align: right;
+}
@@ -0,0 +1,56 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Comment.css';
+import {t, timeago} from 'plugin-api/beta/client/services';
+import {Slot} from 'plugin-api/beta/client/components';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+import {pluginName} from '../../package.json';
+
+class Comment extends React.Component {
+
+  viewComment = () => {
+    this.props.viewComment(this.props.comment.id);
+  }
+
+  render() {
+    const {comment, asset, root, data} = this.props;
+    return (
+      <div className={cn(styles.root, `${pluginName}-comment`)}>
+
+        <blockquote className={cn(styles.quote, `${pluginName}-comment-body`)}>
+          {comment.body}
+        </blockquote>
+
+        <div className={cn(`${pluginName}-comment-username-box`)}>
+          <strong className={cn(styles.username, `${pluginName}-comment-username`)}>
+            {comment.user.username}
+          </strong>
+          <span className={cn(styles.timeago, `${pluginName}-comment-timeago`)}>
+            ,{' '}{timeago(comment.created_at)}
+          </span>
+        </div>
+
+        <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
+          <div className={cn(styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
+
+            <Slot
+              fill="commentReactions"
+              root={root}
+              data={data}
+              comment={comment}
+              asset={asset}
+              inline
+            />
+          </div>
+          <div className={cn(styles.actionsContainer, `${pluginName}-comment-actions`)}>
+            <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>
+              <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
+            </button>
+          </div>
+        </footer>
+      </div>
+    );
+  }
+}
+
+export default Comment;
@@ -0,0 +1,10 @@
+.infoIcon {
+  color: #616161;
+  vertical-align: middle;
+  font-size: 16px;
+  margin-left: 5px;
+}
+
+ .infoIcon.on {
+  color: #1d5294;
+} 
@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './InfoIcon.css';
+import cn from 'classnames';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export default ({tooltip}) => (
+  <Icon 
+    name="info_outline"
+    className={cn(styles.infoIcon, {[styles.on]: tooltip})}
+  />
+);
@@ -0,0 +1,30 @@
+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 {
+  render () {
+    const {loadingState, loadMore} = this.props;
+    const disabled = loadingState === 'loading';
+    return (
+      <div className='talk-load-more'>
+        <Button
+          onClick={loadMore}
+          className={cn('talk-load-more-button', {[`talk-load-more-button-${loadingState}`]: loadingState})}
+          disabled={disabled}
+        >
+          {t('framework.view_more_comments')}
+        </Button>
+      </div>
+    );
+  }
+}
+
+LoadMore.propTypes = {
+  loadMore: PropTypes.func.isRequired,
+  loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
+};
+
+export default LoadMore;
@@ -0,0 +1,18 @@
+import React from 'react';
+import {TabCount} from 'plugin-api/beta/client/components/ui';
+import InfoIcon from './InfoIcon';
+import {t} from 'plugin-api/beta/client/services';
+import Tooltip from './Tooltip';
+
+export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
+  return (
+    <span 
+      onMouseEnter={props.showTooltip}
+      onMouseLeave={props.hideTooltip} >
+      {t('talk-plugin-featured-comments.featured')}
+      <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
+      <InfoIcon tooltip={tooltip} /> 
+      {tooltip && <Tooltip />} 
+    </span>
+  );
+};
@@ -0,0 +1,47 @@
+import React from 'react';
+import Comment from '../containers/Comment';
+import LoadMore from './LoadMore';
+import {forEachError} from 'plugin-api/beta/client/utils';
+
+class TabPane extends React.Component {
+  state = {
+    loadingState: '',
+  };
+
+  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);});
+      });
+  }
+
+  render() {
+    const {root, data, asset: {featuredComments, ...asset}, viewComment} = this.props;
+    return (
+      <div>
+        {featuredComments.nodes.map((comment) =>
+          <Comment
+            key={comment.id}
+            root={root}
+            data={data}
+            comment={comment}
+            asset={asset}
+            viewComment={viewComment} />
+        )}
+        {featuredComments.hasNextPage &&
+          <LoadMore
+            loadMore={this.loadMore}
+            loadingState={this.loadingState}
+          />
+        }
+      </div>
+    );
+  }
+}
+
+export default TabPane;
@@ -0,0 +1,42 @@
+.tagIcon {
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.icon {
+  font-size: 12px;
+  vertical-align: middle;
+}
+
+.tag {
+  background-color: #10589b;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  display: inline-block;
+  margin: 0px 5px;
+  padding: 5px 5px;
+  border-radius: 2px;
+}
+
+.tag.on {
+  background-color: #1862a7;
+  cursor: pointer;
+}
+
+.tooltip {
+  top: 36px;
+  left: auto;
+  right: 10px;
+}
+
+.tooltip::before{
+  left: auto;
+  right: 16px;
+}
+
+.tooltip::after{
+  left: auto;
+  right: 16px;
+  top: -20px;
+}
@@ -0,0 +1,45 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Tag.css';
+import Tooltip from './Tooltip';
+import {t} from 'plugin-api/beta/client/services';
+import {isTagged} from 'plugin-api/beta/client/utils';
+
+export default class Tag extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      tooltip: false
+    };
+
+  }
+
+  showTooltip = () => {
+    this.setState({
+      tooltip: true
+    });
+  }
+
+  hideTooltip = () => {
+    this.setState({
+      tooltip: false
+    });
+  }
+
+  render() {
+    const {tooltip} = this.state;
+    return(
+      <div onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip} >
+          {
+            isTagged(this.props.comment.tags, 'FEATURED') ? (
+              <span className={cn(styles.tag, {[styles.on]: tooltip})}>
+                {t('talk-plugin-featured-comments.featured')}
+              </span>
+            ) : null
+          }
+        {tooltip && <Tooltip className={styles.tooltip} />}
+      </div>
+    );
+  }
+}
@@ -0,0 +1,64 @@
+.tooltip {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 26px;
+  left: 50px;
+  width: 200px;
+  text-align: left;
+  color: #616161;
+}
+
+.tooltip::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  left: 46px;
+  top: -21px;
+  transform: rotate(180deg);
+}
+
+.tooltip::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 46px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.headline {
+  color: #484747;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-size: 1.02em;
+  margin-left: 6px;
+  letter-spacing: 0.2px;
+  vertical-align: middle;
+  margin-bottom: 2px;
+  line-height: 22px;
+}
+
+.icon {
+  font-size: 1.4em;
+  vertical-align: middle;
+}
+
+.description {
+  width: 100%;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  padding: 0;
+  margin: 0;
+  padding-left: 25px;
+  font-weight: 400;
+  font-size: 1em;
+}
@@ -0,0 +1,17 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Tooltip.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export default ({className = ''}) => (
+  <div className={cn(styles.tooltip, className)}>
+    <Icon name="info_outline" className={styles.icon} />
+    <h3 className={styles.headline}>
+      {t('talk-plugin-featured-comments.featured_comments')}:
+    </h3>
+    <p className={styles.description}>
+      {t('talk-plugin-featured-comments.tooltip_description')}
+    </p>
+  </div>
+);
@@ -0,0 +1,2 @@
+export const SHOW_TOOLTIP = 'SHOW_TOOLTIP';
+export const HIDE_TOOLTIP = 'HIDE_TOOLTIP';
@@ -0,0 +1,55 @@
+import {gql} from 'react-apollo';
+import Comment from '../components/Comment';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
+
+const slots = [
+  'commentReactions',
+];
+
+export default withFragments({
+  root: gql`
+    fragment TalkFeaturedComments_Comment_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+    `,
+  asset: gql`
+    fragment TalkFeaturedComments_Comment_asset on Asset {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'asset')}
+    }
+    `,
+  comment: gql`
+    fragment TalkFeaturedComments_Comment_comment on Comment {
+      id
+      body
+      created_at
+      replyCount
+      tags {
+        tag {
+          name
+        }
+      }
+
+      ##
+      # TODO: Remove this when we have the IntrospectionFragmentMatcher.
+      # Currently without this loading more featured comments
+      # brings apollo into an inconsistent state.
+      action_summaries {
+        __typename
+        count
+        current_user {
+          id
+        }
+      }
+      ##
+
+      user {
+        id
+        username
+      }
+      ${getSlotFragmentSpreads(slots, 'comment')}
+    }
+  `
+})(Comment);
@@ -0,0 +1,26 @@
+import Tab from '../components/Tab';
+import {bindActionCreators} from 'redux';
+import {showTooltip, hideTooltip} from '../actions';
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf, connect} from 'plugin-api/beta/client/hocs';
+
+const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    showTooltip,
+    hideTooltip,
+  }, dispatch);
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withFragments({
+    asset: gql`
+      fragment TalkFeaturedComments_Tab_asset on Asset {
+          featuredCommentsCount: totalCommentCount(tags: ["FEATURED"], excludeIgnored: $excludeIgnored)
+      }`,
+  }),
+  excludeIf((props) => props.asset.featuredCommentsCount === 0),
+);
+
+export default enhance(Tab);
@@ -0,0 +1,98 @@
+import React from 'react';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import TabPane from '../components/TabPane';
+import {withFragments, connect} from 'plugin-api/beta/client/hocs';
+import Comment from '../containers/Comment';
+import {addNotification} from 'plugin-api/beta/client/actions/notification';
+import {viewComment} from 'coral-embed-stream/src/actions/stream';
+import {insertCommentsSorted, getDefinitionName} from 'plugin-api/beta/client/utils';
+import update from 'immutability-helper';
+
+class TabPaneContainer extends React.Component {
+
+  loadMore = () => {
+    return this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables: {
+        limit: 5,
+        cursor: this.props.root.asset.featuredComments.endCursor,
+        asset_id: this.props.root.asset.id,
+        sort: 'REVERSE_CHRONOLOGICAL',
+        excludeIgnored: this.props.data.variables.excludeIgnored,
+      },
+      updateQuery: (previous, {fetchMoreResult:{comments}}) => {
+        const updated = update(previous, {
+          asset: {
+            featuredComments: {
+              nodes: {
+                $apply: (nodes) => insertCommentsSorted(nodes, comments.nodes, 'REVERSE_CHRONOLOGICAL'),
+              },
+              hasNextPage: {$set: comments.hasNextPage},
+              endCursor: {$set: comments.endCursor},
+            },
+          }
+        });
+        return updated;
+      },
+    });
+  };
+
+  render() {
+    return <TabPane
+      {...this.props}
+      loadMore={this.loadMore}
+    />;
+  }
+}
+
+const LOAD_MORE_QUERY = gql`
+  query TalkFeaturedComments_LoadMoreComments($limit: Int = 5, $cursor: Date, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
+    comments(query: {limit: $limit, cursor: $cursor, tags: ["FEATURED"], asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
+      nodes {
+        ...${getDefinitionName(Comment.fragments.comment)}
+      }
+      hasNextPage
+      startCursor
+      endCursor
+    }
+  }
+  ${Comment.fragments.comment}
+`;
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    viewComment,
+    addNotification,
+  }, dispatch);
+
+const enhance = compose(
+  connect(null, mapDispatchToProps),
+  withFragments({
+    root: gql`
+      fragment TalkFeaturedComments_TabPane_root on RootQuery {
+        __typename
+        ...${getDefinitionName(Comment.fragments.root)}
+      }
+      ${Comment.fragments.root}
+    `,
+    asset: gql`
+      fragment TalkFeaturedComments_TabPane_asset on Asset {
+        id
+        featuredComments: comments(tags: ["FEATURED"], excludeIgnored: $excludeIgnored, deep: true) {
+          nodes {
+            ...${getDefinitionName(Comment.fragments.comment)}
+          }
+          hasNextPage
+          startCursor
+          endCursor
+        }
+        ...${getDefinitionName(Comment.fragments.asset)}
+      }
+      ${Comment.fragments.comment}
+      ${Comment.fragments.asset}
+    `,
+  }),
+);
+
+export default enhance(TabPaneContainer);
@@ -0,0 +1,96 @@
+import Tab from './containers/Tab';
+import Tag from './components/Tag';
+import Button from './components/Button';
+import TabPane from './containers/TabPane';
+import translations from './translations.yml';
+import update from 'immutability-helper';
+import reducer from './reducer';
+
+import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
+import {insertCommentsSorted} from 'plugin-api/beta/client/utils';
+
+export default {
+  reducer,
+  translations,
+  slots: {
+    streamTabs: [Tab],
+    streamTabPanes: [TabPane],
+    commentInfoBar: [Tag],
+    commentReactions: [Button]
+  },
+  mutations: {
+    IgnoreUser: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (previous) => {
+          const ignoredUserId = variables.id;
+          const newNodes = previous.asset.featuredComments.nodes.filter((n) => n.user.id !== ignoredUserId);
+          const removedCount =  previous.asset.featuredComments.nodes.length - newNodes.length;
+          const updated = update(previous, {
+            asset: {
+              featuredComments: {
+                nodes: {$set: newNodes}
+              },
+              featuredCommentsCount: {
+                $apply: (value) => value - removedCount,
+              }
+            }
+          });
+          return updated;
+        }
+      }
+    }),
+    AddTag: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (previous) => {
+
+          if (variables.name !== 'FEATURED') {
+            return;
+          }
+
+          const comment = findCommentInEmbedQuery(previous, variables.id);
+
+          const updated = update(previous, {
+            asset: {
+              featuredComments: {
+                nodes: {
+                  $apply: (nodes) => insertCommentsSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL')
+                }
+              },
+              featuredCommentsCount: {
+                $apply: (value) => value + 1
+              }
+            }
+          });
+
+          return updated;
+        },
+      }
+    }),
+    RemoveTag: ({variables}) => ({
+      updateQueries: {
+        CoralEmbedStream_Embed: (previous) => {
+
+          if (variables.name !== 'FEATURED') {
+            return;
+          }
+
+          const updated = update(previous, {
+            asset: {
+              featuredComments: {
+                nodes: {
+                  $apply: (nodes) =>
+                    nodes.filter((n) => n.id !== variables.id)
+                }
+              },
+              featuredCommentsCount: {
+                $apply: (value) => value - 1
+              }
+            }
+          });
+
+          return updated;
+        },
+      }
+    })
+  },
+};
@@ -0,0 +1,22 @@
+import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
+
+const initialState = {
+  tooltip: false
+};
+
+export default function featured (state = initialState, action) {
+  switch (action.type) {
+  case SHOW_TOOLTIP: 
+    return {
+      ...state,
+      tooltip: true
+    };
+  case HIDE_TOOLTIP: 
+    return {
+      ...state,
+      tooltip: false
+    };
+  default :
+    return state;
+  }
+}
@@ -0,0 +1,12 @@
+en:
+  talk-plugin-featured-comments:
+    featured: Featured
+    featured_comments: Featured Comments
+    go_to_conversation: Go to conversation
+    tooltip_description: Comments selected by our team as worth reading
+es:
+  talk-plugin-featured-comments:
+    featured: Remarcado
+    featured_comments: Comentarios Remarcados
+    go_to_conversation: Ir al comentario
+    tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos
@@ -0,0 +1,14 @@
+module.exports = {
+  tags: [
+    {
+      name: 'FEATURED',
+      permissions: {
+        public: true,
+        self: true,
+        roles: []
+      },
+      models: ['COMMENTS'],
+      created_at: new Date()
+    }
+  ]
+};
@@ -0,0 +1,9 @@
+{
+  "name": "@coralproject/talk-plugin-featured-comments",
+  "pluginName": "talk-plugin-featured-comments",
+  "version": "0.0.1",
+  "description": "Provides support for featured comments",
+  "main": "index.js",
+  "author": "The Coral Project Team <coral@mozillafoundation.org>",
+  "license": "Apache-2.0"
+}
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
@@ -1,9 +0,0 @@
-import React from 'react';
-import {TabCount} from 'plugin-api/beta/client/components/ui';
-
-// TODO: This is just example code, and needs to replaced by an actual implementation.
-export default ({active, asset: {recentComments}}) => (
-  <span>
-    Featured <TabCount active={active} sub>{recentComments.length}</TabCount>
-  </span>
-);
@@ -1,16 +0,0 @@
-import React from 'react';
-
-// TODO: This is just example code, and needs to replaced by an actual implementation.
-export default ({asset: {recentComments}}) => (
-  <div>
-    {recentComments.map((comment) => (
-      <div key={comment.id}>
-        <div><strong>{comment.user.username}</strong></div>
-        <div>
-          {comment.body}
-        </div>
-        <hr />
-      </div>
-    ))}
-  </div>
-);
@@ -1,17 +0,0 @@
-import {compose, gql} from 'react-apollo';
-import withFragments from 'coral-framework/hocs/withFragments';
-import Tab from '../components/Tab';
-
-// TODO: This is just example code, and needs to replaced by an actual implementation.
-const enhance = compose(
-  withFragments({
-    asset: gql`
-      fragment TalkFeatured_Tab_asset on Asset {
-        recentComments {
-          id
-        }
-      }`,
-  }),
-);
-
-export default enhance(Tab);
@@ -1,22 +0,0 @@
-import {compose, gql} from 'react-apollo';
-import withFragments from 'coral-framework/hocs/withFragments';
-import TabPane from '../components/TabPane';
-
-// TODO: This is just example code, and needs to replaced by an actual implementation.
-const enhance = compose(
-  withFragments({
-    asset: gql`
-      fragment TalkFeatured_TabPane_asset on Asset {
-        recentComments {
-          id
-          body
-          user {
-            id
-            username
-          }
-        }
-      }`,
-  }),
-);
-
-export default enhance(TabPane);
@@ -1,9 +0,0 @@
-import Tab from './containers/Tab';
-import TabPane from './containers/TabPane';
-
-export default {
-  slots: {
-    streamTabs: [Tab],
-    streamTabPanes: [TabPane],
-  }
-};
@@ -1,2 +0,0 @@
-module.exports = {};
-
@@ -62,7 +62,7 @@ export default class PermalinkButton extends React.Component {

  render () {
    const {copySuccessful, copyFailure, popoverOpen} = this.state;
-    const {asset} = this.props;
+    const {asset, comment} = this.props;
    return (
      <ClickOutside onClickOutside={this.handleClickOutside}>
        <div className={cn(`${name}-container`, styles.container)}>
@@ -83,7 +83,8 @@ export default class PermalinkButton extends React.Component {
              className={cn(styles.input, `${name}-copy-field`)}
              type='text'
              ref={(input) => this.permalinkInput = input}
-              defaultValue={`${asset.url}?commentId=${this.props.commentId}`}
+              defaultValue={`${asset.url}?commentId=${comment.id}`}
+              readOnly
            />

            <Button
@@ -160,12 +160,6 @@ module.exports = {
    },
    registerButton: {
      selector: '#signInDialog #coralRegister'
-    },
-    setBestButton: {
-      selector: '.e2e__set-best-comment'
-    },
-    unsetBestButton: {
-      selector: '.e2e__unset-best-comment'
    }
  }
 };
@@ -1,25 +0,0 @@
-module.exports = {
-  '@tags': ['like', 'comments', 'commenter'],
-  before: (client) => {
-    const embedStreamPage = client.page.embedStreamPage();
-    const {users} = client.globals;
-
-    embedStreamPage
-      .navigate()
-      .ready();
-
-    embedStreamPage
-      .login(users.commenter);
-  },
-  'Commenters should not see the set-best-comment button': (client) => {
-    const embedStreamPage = client.page.embedStreamPage();
-
-    embedStreamPage
-      .postComment('Hi everyone. Isn\'t this the BEST comment!?')
-      .waitForElementVisible('@likeButton')
-      .expect.element('@setBestButton').to.not.be.present;
-  },
-  after: (client) => {
-    client.end();
-  }
-};
@@ -1,50 +0,0 @@
-module.exports = {
-  '@tags': ['like', 'comments', 'commenter'],
-  before: (client) => {
-    const embedStreamPage = client.page.embedStreamPage();
-    const {users} = client.globals;
-
-    embedStreamPage
-      .navigate()
-      .ready();
-
-    embedStreamPage
-      .login(users.moderator);
-  },
-  'Moderator marks/unmarks their comment as BEST': (client) => {
-    const embedStreamPage = client.page.embedStreamPage();
-
-    const setBestCommentButton = '.e2e__set-best-comment';
-    const unsetBestCommentButton = '.e2e__unset-best-comment';
-
-    embedStreamPage
-      .postComment(`Hi everyone. Isn't this the BEST comment!? ${String(Math.random()).slice(2)}`)
-      .waitForElementVisible(setBestCommentButton, 2000)
-      .click(setBestCommentButton)
-      .waitForElementVisible(unsetBestCommentButton, 2000);
-
-    // on refresh, it should still be tagged as best :)
-    client.refresh();
-    embedStreamPage.ready()
-
-      // (bengo) I have no idea why, but if the selector here is '@unsetBestButton', it doesn't find it... I think nightwatch bug?
-      // this is why I am not using @elements. Advice appreciated.
-      .waitForElementVisible(unsetBestCommentButton, 2000);
-
-    // now remove the best tag
-    embedStreamPage
-      .click(unsetBestCommentButton);
-
-    embedStreamPage
-      .waitForElementVisible(setBestCommentButton, 2000);
-
-    // on refresh it should still be untagged best
-    client.refresh();
-    embedStreamPage.ready()
-      .waitForElementVisible(setBestCommentButton);
-
-  },
-  after: (client) => {
-    client.end();
-  }
-};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Kim Gardner	db183124c9	Merge pull request #787 from coralproject/long-title Fix for long titles in the All Streams Queue	2017-07-21 21:18:44 -04:00
Kim Gardner	ee220ca936	Merge branch 'master' into long-title	2017-07-21 21:13:24 -04:00
Kim Gardner	907e9bf226	Merge pull request #786 from coralproject/featured-comments-info Featured Comments Tooltips	2017-07-21 15:18:15 -04:00
Belen Curcio	25bccde40f	fix	2017-07-21 16:08:18 -03:00
Belen Curcio	6343a0d621	Adding tooltip to badges too	2017-07-21 16:01:43 -03:00
Kim Gardner	6e6caaf5a9	Merge pull request #782 from coralproject/post-comment-no-alias Remove remaining username alias in post comment mutation	2017-07-21 09:35:58 -04:00
Kim Gardner	8261c40c8d	Merge branch 'master' into post-comment-no-alias	2017-07-21 09:31:01 -04:00
Kim Gardner	316b0a8808	Merge pull request #781 from coralproject/featured-tag-on-replies Show featured tag on replies too	2017-07-21 09:30:45 -04:00
Kim Gardner	ebce930b8c	Merge branch 'master' into featured-tag-on-replies	2017-07-21 09:19:21 -04:00
Kim Gardner	8c8a2fcee0	Merge pull request #780 from coralproject/incosistent-state-load-more Quick fix inconsistent state	2017-07-21 09:18:46 -04:00
Kim Gardner	1733ab8690	Merge branch 'master' into post-comment-no-alias	2017-07-21 09:16:54 -04:00
Kim Gardner	9624a12e39	Merge branch 'master' into featured-tag-on-replies	2017-07-21 09:15:31 -04:00
Kim Gardner	143050cbd5	Merge branch 'master' into incosistent-state-load-more	2017-07-21 09:14:19 -04:00
Kim Gardner	0fd7d9f020	Merge pull request #784 from coralproject/featured-comments-info Featured Comments Info Tooltip	2017-07-21 09:14:00 -04:00
Belén Curcio	7ac3a325f7	Merge branch 'master' into featured-comments-info	2017-07-21 05:43:05 -03:00
Belen Curcio	149389057d	Translations and style	2017-07-21 05:34:28 -03:00
Belen Curcio	3b01218338	Adding translations	2017-07-21 05:34:04 -03:00
Belen Curcio	2d8e36e511	Removing innecesary connects, and classes	2017-07-21 05:27:34 -03:00
Belen Curcio	9c9f088ac3	Containers, reducer and constants	2017-07-21 05:24:45 -03:00
Belen Curcio	392d82e30a	Info Icon, and Tooltip	2017-07-21 05:24:27 -03:00
Belen Curcio	f86d210bbb	Adding actions	2017-07-21 05:23:54 -03:00
Belen Curcio	11ea45ef69	typo with white space	2017-07-21 05:21:13 -03:00
Belén Curcio	b0cbddd313	Merge pull request #783 from coralproject/disable-fragment-warnings Disable false-positive warnings	2017-07-20 19:32:57 -03:00
Chi Vinh Le	1f8f293594	Disable false-positive warnings	2017-07-21 04:17:47 +07:00
Chi Vinh Le	7ca7166c7a	Add clarification	2017-07-21 04:08:43 +07:00
Chi Vinh Le	65500eda64	Remove remaining username alias in post comment mutation	2017-07-21 03:57:32 +07:00
Chi Vinh Le	0e37f36e02	Show featured tag on replies too	2017-07-21 02:36:04 +07:00
Chi Vinh Le	abed842c23	Quick fix inconsistent state	2017-07-21 02:27:59 +07:00
Kim Gardner	e1d1549c93	Merge pull request #736 from coralproject/featured-comments Featured Comments	2017-07-20 10:45:56 -04:00
Belen Curcio	8f820ace5b	Merge branch 'master' of github.com:coralproject/talk	2017-07-20 11:45:54 -03:00
Belen Curcio	1069498323	Merge branch 'master' of github.com:coralproject/talk	2017-07-20 11:31:25 -03:00
Kim Gardner	c34daacd8c	Merge branch 'master' into featured-comments	2017-07-19 20:07:28 -04:00
Kim Gardner	f7f5b42b71	Merge pull request #778 from coralproject/make-permalink-readonly Make permalink readonly	2017-07-19 20:07:12 -04:00
Chi Vinh Le	f8a3b84e94	Make permalink readonly	2017-07-20 04:04:25 +07:00
Chi Vinh Le	44e89bc96c	Remove unused style	2017-07-20 04:01:39 +07:00
Chi Vinh Le	2342934f48	Reset star button css	2017-07-20 03:58:22 +07:00
Chi Vinh Le	5328374b73	Make goTo link accessible	2017-07-20 03:51:34 +07:00
Chi Vinh Le	6f64eac5de	Merge branch 'featured-comments' of ssh://github.com/coralproject/talk into featured-comments	2017-07-20 03:45:01 +07:00
Chi Vinh Le	0b884a7664	Harmonize classnames	2017-07-20 03:44:25 +07:00
Kim Gardner	64602f1731	Merge branch 'master' into featured-comments	2017-07-19 16:42:37 -04:00
Kim Gardner	3bc26cad80	Merge pull request #776 from coralproject/bump-version-2-5-0 Bump version 2.5.0	2017-07-19 16:41:26 -04:00
Kim Gardner	def49d42aa	Merge branch 'master' into bump-version-2-5-0	2017-07-19 16:34:43 -04:00
Chi Vinh Le	3d4c296837	Merge branch 'featured-comments' of ssh://github.com/coralproject/talk into featured-comments	2017-07-20 03:31:44 +07:00
Chi Vinh Le	64571d3848	Subtract ignored comments correctly	2017-07-20 03:30:37 +07:00
Kim Gardner	ad669b8399	Merge branch 'master' into featured-comments	2017-07-19 16:28:20 -04:00
Kim Gardner	1c8e009366	Merge pull request #777 from coralproject/perma-link-plugin-commentId Replace deprecated commentId in talk-plugin-permalink	2017-07-19 16:27:59 -04:00
Chi Vinh Le	5d8528fdb5	Replace deprecated commentId	2017-07-20 03:16:05 +07:00
Kim Gardner	6cab2634bf	Add space before Go to conversation text	2017-07-19 16:05:28 -04:00
Chi Vinh Le	d6adff288c	Fix typo	2017-07-20 02:51:09 +07:00
Chi Vinh Le	ad4b03bfcd	Merge branch 'master' into featured-comments	2017-07-20 02:39:29 +07:00
Kim Gardner	99b8b4e90b	Bump version 2.5.0	2017-07-19 15:34:04 -04:00
Chi Vinh Le	3fa475009a	Use getDefinition name from plugin-api	2017-07-20 02:32:17 +07:00
Kim Gardner	139802381f	Merge pull request #775 from coralproject/recursively-resolve-fragments Recursively resolve fragments	2017-07-19 15:29:06 -04:00
Chi Vinh Le	fd0143da5d	Use connect from framework	2017-07-20 02:17:31 +07:00
Chi Vinh Le	baa4808364	Allow setting default stream tab	2017-07-20 02:16:19 +07:00
Chi Vinh Le	673f0cd232	Hide featured comments tab when empty	2017-07-20 02:07:40 +07:00
Kim Gardner	fa02d44270	Merge branch 'master' into recursively-resolve-fragments	2017-07-19 14:32:02 -04:00
Chi Vinh Le	84edd8c6c2	Merge branch 'master' into featured-comments Conflicts: client/coral-embed-stream/src/components/Stream.js	2017-07-20 01:30:22 +07:00
Chi Vinh Le	da2bc69d19	Translation	2017-07-20 01:27:06 +07:00
Chi Vinh Le	b769e95898	Implement pagination	2017-07-20 01:19:45 +07:00
Kim Gardner	2b7f46efc7	Merge pull request #769 from coralproject/excludeIf-api Conditionally exclude a Plugin Component from a Slot	2017-07-19 13:03:49 -04:00
Chi Vinh Le	7005175fc0	Simplify file namings	2017-07-19 23:55:35 +07:00
Chi Vinh Le	8f64229dee	Implement FeaturedComment container	2017-07-19 23:50:39 +07:00
Chi Vinh Le	47a5b84a74	Pass correct slot props	2017-07-19 23:37:35 +07:00
Chi Vinh Le	cc1026233f	Merge branch 'recursively-resolve-fragments' into featured-comments	2017-07-19 23:32:04 +07:00
Chi Vinh Le	6f1b0b55ec	Merge branch 'master' into featured-comments	2017-07-19 23:31:54 +07:00
Chi Vinh Le	dcdfbb691a	Use lazy loading for slot fragments	2017-07-19 23:30:51 +07:00
Chi Vinh Le	55ff0bcf8c	Recursively resolve fragments	2017-07-19 22:58:27 +07:00
Belén Curcio	d61374993a	Merge branch 'master' into excludeIf-api	2017-07-19 11:47:51 -03:00
Kim Gardner	980dc2515e	Merge pull request #774 from coralproject/resolve-slot-fragments-lazy Support lazily resolving slot fragments	2017-07-19 10:45:19 -04:00
Chi Vinh Le	4511b9ca57	Merge branch 'resolve-slot-fragments-lazy' into featured-comments Conflicts: client/coral-embed-stream/src/containers/Stream.js client/coral-framework/utils/index.js plugin-api/beta/client/utils/index.js	2017-07-19 21:15:35 +07:00
Chi Vinh Le	52cd7bcce4	Expose getSlotFragmentSpread in plugin-api	2017-07-19 20:59:03 +07:00
Chi Vinh Le	5fee26da0e	Document getSlotFragmentSpreads	2017-07-19 20:50:00 +07:00
Chi Vinh Le	d99f6d8923	Support lazily resolving slot fragments	2017-07-19 20:44:22 +07:00
Chi Vinh Le	f051ee1d58	Don't create callback in render	2017-07-19 00:48:33 +07:00
Chi Vinh Le	cd1735e1d6	Merge branch 'featured-comments' of ssh://github.com/coralproject/talk into featured-comments	2017-07-19 00:34:12 +07:00
Chi Vinh Le	3b10aa3945	Implement 'Go to conversation'	2017-07-19 00:33:01 +07:00
Kim Gardner	3b0b6bd73c	Merge branch 'master' into featured-comments	2017-07-18 12:03:12 -04:00
Chi Vinh Le	760d078705	Embed scroll to correct element	2017-07-18 23:00:12 +07:00
Chi Vinh Le	46473142ba	Use generic version of addTag, removeTag in framework	2017-07-18 21:23:39 +07:00
Chi Vinh Le	8a619a219f	Refactor isFeatured / isTagged	2017-07-18 21:10:59 +07:00
Kim Gardner	73d15f34d7	Merge branch 'master' into excludeIf-api	2017-07-18 10:10:20 -04:00
Chi Vinh Le	cf56ca8263	Merge branch 'featured-comments' of ssh://github.com/coralproject/talk into featured-comments	2017-07-18 21:07:09 +07:00
Kim Gardner	1183550e14	Merge pull request #768 from coralproject/docs-microservices Write microservice docs	2017-07-18 10:05:37 -04:00
Chi Vinh Le	6652368221	Don't export internals of embed stream in plugin-api (for now)	2017-07-18 21:04:30 +07:00
Kim Gardner	d488e168c4	Merge branch 'master' into featured-comments	2017-07-18 09:59:49 -04:00
Kim Gardner	9990142740	Merge branch 'master' into docs-microservices	2017-07-18 09:58:54 -04:00
Kim Gardner	33bd2f576a	Merge branch 'master' into excludeIf-api	2017-07-18 09:58:44 -04:00
Chi Vinh Le	19929c97d8	Fix layout issues in comment	2017-07-18 20:17:01 +07:00
Chi Vinh Le	99fc67d0d9	Rename insertSorted to insertCommentSorted	2017-07-18 19:38:52 +07:00
Chi Vinh Le	636d1f4788	Use `withFragments` from plugin-api	2017-07-18 19:37:30 +07:00
Chi Vinh Le	d45038ccc5	Adapt package.json	2017-07-18 19:37:24 +07:00
Chi Vinh Le	9746422b16	Remove unused actions	2017-07-18 18:31:35 +07:00
Chi Vinh Le	4ee727c86a	Fix inconsistent query state	2017-07-18 18:27:58 +07:00
Chi Vinh Le	ad09ce03a1	Prevent double execution of mutation	2017-07-18 17:09:48 +07:00
Chi Vinh Le	afeeffc262	Show notification upon failure	2017-07-18 17:08:14 +07:00
Chi Vinh Le	043d5fdcec	Handle ignore user	2017-07-18 16:39:06 +07:00
Chi Vinh Le	8c7c564a30	Allow comment slots to extend the asset fragment + harmonize slot props	2017-07-18 15:23:02 +07:00
Wyatt Johnson	13cac731b9	Merge pull request #773 from icco/patch-1 Fix email address env var in docs	2017-07-17 15:29:40 -06:00
Nat Welch	ab87500303	Fix email address env var in docs	2017-07-17 17:02:46 -04:00
Andrew Losowsky	244d421eda	Merge pull request #770 from coralproject/autoflag-suspect Added new TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS option	2017-07-17 13:28:04 -07:00
Wyatt Johnson	d5dfd89d94	review of docs	2017-07-17 10:54:54 -06:00
Wyatt Johnson	d82735b2b5	Adjusted docs	2017-07-17 10:50:40 -06:00
Wyatt Johnson	b091cf5221	Added new TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS option	2017-07-17 10:43:28 -06:00
Chi Vinh Le	d90f87428c	Remove changes in featured	2017-07-17 19:37:01 +07:00
Chi Vinh Le	41f5297d78	Deprecate `isSlotEmpty` in the plugins api	2017-07-17 19:32:48 +07:00
Chi Vinh Le	0e9d9067f9	Use plugin-api and port plugins to it	2017-07-17 19:28:02 +07:00
Chi Vinh Le	d2e6a98d46	connect aware "excludeIf" using our own hoc	2017-07-17 18:06:51 +07:00
Chi Vinh Le	4dd03508ee	Merge branch 'master' into excludeIf-api	2017-07-17 17:15:16 +07:00
Chi Vinh Le	fb2662572a	Implement excludeIf for the plugins API	2017-07-17 17:06:12 +07:00
David Erwin	0069f31244	Make it accurate	2017-07-14 16:07:47 -04:00
David Erwin	b235b8334e	Give some context	2017-07-14 16:06:47 -04:00
David Erwin	acb7028471	Write microservice docs	2017-07-14 16:01:57 -04:00
Kim Gardner	9daaa6ffee	Merge branch 'master' into featured-comments	2017-07-14 14:27:41 -04:00
David Erwin	af3489db9c	Merge pull request #767 from coralproject/update-node Update Node version to 7.10.1	2017-07-14 14:27:08 -04:00
Kim Gardner	012fa3e4aa	Merge branch 'master' into featured-comments	2017-07-14 14:13:53 -04:00
Belen Curcio	a8467db7aa	Handling cache and mutations	2017-07-14 14:57:34 -03:00
Kim Gardner	05e2302794	Update CircleCI node version	2017-07-14 13:31:35 -04:00
Kim Gardner	c610c319de	Downgrade to 7.10.1 due to dependency issues	2017-07-14 13:16:38 -04:00
Kim Gardner	04d330cf5b	Update node version in CircleCI config	2017-07-14 12:41:15 -04:00
Kim Gardner	8cbb56af19	Update default node version for Talk	2017-07-14 12:40:39 -04:00
Kim Gardner	d4cb07e448	Update node version in Dockerfile	2017-07-14 12:39:48 -04:00
Belen Curcio	71b4413f92	Using same slot	2017-07-14 13:39:35 -03:00
Kim Gardner	9455eea041	Merge pull request #766 from coralproject/add-code-of-conduct-1 Created Code of Conduct	2017-07-14 11:23:56 -04:00
Andrew Losowsky	e8bbd7e4d7	Created Code of Conduct Merged ours with the Contributor Covenant	2017-07-14 10:34:58 -04:00
Belen Curcio	94032b69fc	Missing asset	2017-07-14 11:34:20 -03:00
Belen Curcio	1f199ad3dd	Merge branch 'master' of github.com:coralproject/talk into featured-comments	2017-07-14 11:31:58 -03:00
Belen Curcio	eb038b9d49	Adding a slot to push like into featured comments 😎	2017-07-13 17:59:09 -03:00
Belen Curcio	b8d00ec9ce	Adding go to conversation	2017-07-13 17:29:54 -03:00
Belen Curcio	b5ce16a33b	Styling	2017-07-13 16:56:40 -03:00
Belen Curcio	f8a6987476	Styles	2017-07-13 16:36:41 -03:00
Kim Gardner	28e589de21	Merge pull request #765 from coralproject/remove-like-plugin-as-default Remove "like" from default plugins	2017-07-13 14:32:19 -04:00
Belen Curcio	1b97811cb0	Querying by featured comments	2017-07-13 15:30:06 -03:00
Kim Gardner	31cfddf93c	Remove "like" from default plugins	2017-07-13 14:20:26 -04:00
Belen Curcio	d72df73d6f	Implementing first draft of FC	2017-07-13 12:53:01 -03:00
Belen Curcio	7ba11cdee9	Merge branch 'master' of github.com:coralproject/talk	2017-07-13 12:36:35 -03:00
Belen Curcio	8d4c0c6721	WIP	2017-07-13 12:15:13 -03:00
Belen Curcio	195592b9ab	Merge branch 'master' into featured-comments	2017-07-13 12:08:02 -03:00
Belen Curcio	da46d27e5b	Merge branch 'featured-comments' of github.com:coralproject/talk into featured-comments	2017-07-13 12:07:23 -03:00
Belen Curcio	bfbe8d44aa	Merg	2017-07-13 12:05:53 -03:00
Belen Curcio	da6965122f	Merge branch 'master' of github.com:coralproject/talk into featured-comments	2017-07-13 12:04:04 -03:00
Kim Gardner	32211c4e37	Merge branch 'master' into featured-comments	2017-07-11 16:33:34 -04:00
Kim Gardner	f0bdee415b	Merge branch 'master' into featured-comments	2017-07-11 08:18:31 -04:00
Belén Curcio	70d1d5e9de	Merge branch 'master' into featured-comments	2017-07-05 12:42:07 -03:00
Belen Curcio	28010488be	Linting	2017-07-05 12:31:35 -03:00
Belen Curcio	2a9535f88a	Featured Comment Styles	2017-07-05 12:28:09 -03:00
Belen Curcio	f9bece468f	Merge branch 'master' of github.com:coralproject/talk into featured-comments	2017-07-05 12:19:09 -03:00
Belen Curcio	38e8bed68a	Merge branch 'featured-comments' of github.com:coralproject/talk into featured-comments	2017-07-05 11:36:26 -03:00
Belen Curcio	3ca62cab65	wip	2017-07-05 11:36:03 -03:00
Belen Curcio	da6bd80de0	Merge branch 'master' of github.com:coralproject/talk into featured-comments	2017-07-05 11:07:42 -03:00
Kim Gardner	774e0cc12e	Merge branch 'master' into featured-comments	2017-07-05 14:29:17 +01:00
Belén Curcio	dcfbcd287b	Merge branch 'master' into featured-comments	2017-07-04 10:29:25 -03:00
Belen Curcio	4af9c3bee2	Merge branch 'featured-comments' of github.com:coralproject/talk into featured-comments	2017-07-03 15:32:48 -03:00
Belen Curcio	ec559f0f23	Merge branch 'master' of github.com:coralproject/talk into featured-comments	2017-07-03 15:32:40 -03:00
Belén Curcio	b902695cb7	Merge branch 'master' into featured-comments	2017-07-03 15:32:36 -03:00
Belen Curcio	34dbbb0984	Removing Best from the core	2017-07-03 15:27:08 -03:00
Belen Curcio	002dc377a6	Featured Comments container, and FeaturedComment component	2017-07-03 13:31:13 -03:00
Belen Curcio	fbdb044551	Moving withTags to the plugin api, adding perms to Feature comments	2017-07-03 11:55:09 -03:00
Belen Curcio	23ebe9f8e3	Translations and functionality	2017-07-03 11:46:34 -03:00
Belen Curcio	e3aecd645e	Ádding withTags hoc, and creating withTags buttons	2017-07-03 10:16:35 -03:00
Belen Curcio	b8020d5347	Adding talk-plugins-featured-comments to the default json	2017-07-03 10:15:57 -03:00
Belen Curcio	95e820e9de	Creating Tag Featured	2017-07-03 09:25:18 -03:00
				`@@ -0,0 +1 @@`
				`export {addNotification} from 'coral-framework/actions/notification';`
				`@@ -0,0 +1 @@`
				`export const pluginConfigSelector = (state) => state.config.pluginConfig;`