Merge branch 'master' into update-on-post-comment

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

@@ -14,11 +14,17 @@ export default ({handleLogout, restricted = false}) => (
       <div>
         <Navigation className={styles.nav}>
           <IndexLink
+            className={styles.navLink}
+            to="/admin/dashboard"
+            activeClassName={styles.active}>
+            {lang.t('configure.dashboard')}
+          </IndexLink>
+          <Link
             className={styles.navLink}
             to="/admin/moderate"
             activeClassName={styles.active}>
             {lang.t('configure.moderate')}
-          </IndexLink>
+          </Link>
           <Link className={styles.navLink}
             to="/admin/streams"
             activeClassName={styles.active}>
@@ -35,12 +41,6 @@ export default ({handleLogout, restricted = false}) => (
             activeClassName={styles.active}>
             {lang.t('configure.configure')}
           </Link>
-          <Link
-            className={styles.navLink}
-            to="/admin/dashboard"
-            activeClassName={styles.active}>
-            {lang.t('configure.dashboard')}
-          </Link>
         </Navigation>
         <div className={styles.rightPanel}>
           <ul>

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -70,8 +70,10 @@ class ModerationContainer extends Component {
       <div>
         <ModerationHeader asset={asset} />
         <ModerationMenu
-          activeTab={activeTab}
           asset={asset}
+          premodCount={data.premodCount}
+          rejectedCount={data.rejectedCount}
+          flaggedCount={data.flaggedCount}
         />
         <ModerationQueue
           data={data}

client/coral-admin/src/containers/ModerationQueue/components/CommentCount.css

@@ -0,0 +1,14 @@
+.count {
+  display: inline-block;
+  background: #989797;
+  margin: 2px;
+  vertical-align: middle;
+  padding: 4px 7px;
+  border-radius: 2px;
+  margin-left: 10px;
+  line-height: 20px;
+  box-sizing: border-box;
+  height: 27px;
+  right: 0;
+  margin-top: -2px;
+}

client/coral-admin/src/containers/ModerationQueue/components/CommentCount.js

@@ -0,0 +1,12 @@
+import React, {PropTypes} from 'react';
+import styles from './CommentCount.css';
+
+const CommentCount = props => (
+  <span className={styles.count}>{props.count}</span>
+);
+
+CommentCount.propTypes = {
+  count: PropTypes.number.isRequired
+};
+
+export default CommentCount;

client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Link} from 'react-router';
+import {Icon} from 'coral-ui';
 import styles from './styles.css';
 
 const ModerationHeader = props => (
@@ -9,7 +10,10 @@ const ModerationHeader = props => (
           props.asset ?
             <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
               <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
-              <a className="mdl-tabs__tab">{props.asset.title}</a>
+              <a className="mdl-tabs__tab">
+                {props.asset.title}
+                <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
+              </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
             </div>
             :

client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
+import CommentCount from './CommentCount';
 import styles from './styles.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
@@ -6,38 +7,36 @@ import {Link} from 'react-router';
 
 const lang = new I18n(translations);
 
-const ModerationMenu = (props) => (
-  <div className='mdl-tabs'>
-    <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-      {
-        props.asset ? (
-          <div>
-            <Link to={`/admin/moderate/premod/${props.asset.id}`} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.premod')}
-            </Link>
-            <Link to={`/admin/moderate/rejected/${props.asset.id}`} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.rejected')}
-            </Link>
-            <Link to={`/admin/moderate/flagged/${props.asset.id}`} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.flagged')}
-            </Link>
-          </div>
-          ) : (
-            <div>
-              <Link to='/admin/moderate/premod' className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-                {lang.t('modqueue.premod')}
-              </Link>
-              <Link to='/admin/moderate/rejected' className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-                {lang.t('modqueue.rejected')}
-              </Link>
-              <Link to='/admin/moderate/flagged' className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-                {lang.t('modqueue.flagged')}
-              </Link>
-            </div>
-          )
-      }
+const ModerationMenu = ({asset, premodCount, rejectedCount, flaggedCount}) => {
+  const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
+  const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
+  const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
+  return (
+    <div className='mdl-tabs'>
+      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+        <div>
+          <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+          </Link>
+          <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+          </Link>
+          <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+        </Link>
+        </div>
+      </div>
     </div>
-  </div>
-);
+  );
+};
+
+ModerationMenu.propTypes = {
+  premodCount: PropTypes.number.isRequired,
+  rejectedCount: PropTypes.number.isRequired,
+  flaggedCount: PropTypes.number.isRequired,
+  asset: PropTypes.shape({
+    id: PropTypes.string
+  })
+};
 
 export default ModerationMenu;

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -77,6 +77,14 @@ span {
   color: white;
   margin-bottom: -1px;
 
+  .settingsButton {
+    i {
+      vertical-align: middle;
+      margin-left: 10px;
+      margin-top: -4px;
+    }
+  }
+
   .moderateAsset {
     a {
       -webkit-box-flex: 1;

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

@@ -20,7 +20,7 @@ export const mostFlags = graphql(MOST_FLAGS, {
 });
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
-  options: ({params: {id = ''}}) => {
+  options: ({params: {id = null}}) => {
     return {
       variables: {
         asset_id: id

client/coral-admin/src/graphql/queries/modQueueQuery.graphql

@@ -1,6 +1,6 @@
 #import "../fragments/commentView.graphql"
 
-query ModQueue ($asset_id: ID!) {
+query ModQueue ($asset_id: ID) {
     premod: comments(query: {
         statuses: [PREMOD],
         asset_id: $asset_id
@@ -29,5 +29,19 @@ query ModQueue ($asset_id: ID!) {
     assets: assets {
       id
       title
+      url
     }
+    premodCount: commentCount(query: {
+      statuses: [PREMOD],
+      asset_id: $asset_id
+    })
+    rejectedCount: commentCount(query: {
+       statuses: [REJECTED],
+       asset_id: $asset_id
+    })
+    flaggedCount: commentCount(query: {
+      action_type: FLAG,
+      asset_id: $asset_id,
+      statuses: [NONE, PREMOD]
+    })
 }