Merge branch 'master' into next

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

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

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

@@ -16,6 +16,7 @@
 }
 
 .comment {
+  position: relative;
   padding-left: 15px;
 }
 

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

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

plugins/talk-plugin-featured-comments/client/components/Tag.css

@@ -17,4 +17,26 @@
   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;
 }

plugins/talk-plugin-featured-comments/client/components/Tag.js

@@ -1,16 +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 (props) => (
-  <span>
-    {
-      isTagged(props.comment.tags, 'FEATURED') && props.depth === 0 ? (
-        <span className={styles.tag}>
-          {t('talk-plugin-featured-comments.featured')}
-        </span>
-      ) : null
-    }
-  </span>
-);
+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>
+    );
+  }
+}

plugins/talk-plugin-featured-comments/client/components/Tooltip.js

@@ -1,10 +1,11 @@
 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 () => (
-  <div className={styles.tooltip}>
+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')}:

plugins/talk-plugin-featured-comments/client/containers/Comment.js

@@ -31,6 +31,20 @@ export default withFragments({
           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

plugins/talk-plugin-featured-comments/client/containers/TabPane.js

@@ -47,7 +47,7 @@ class TabPaneContainer extends React.Component {
 }
 
 const LOAD_MORE_QUERY = gql`
-  query CoralEmbedStream_LoadMoreComments($limit: Int = 5, $cursor: Date, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
+  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)}