Merge branch 'master' into 143202319-mod-queue-shortcuts

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

@@ -135,6 +135,9 @@ class ModerationContainer extends Component {
     const comments = data[activeTab];
     let activeTabCount;
     switch(activeTab) {
+    case 'all':
+      activeTabCount = data.allCount;
+      break;
     case 'premod':
       activeTabCount = data.premodCount;
       break;
@@ -151,6 +154,7 @@ class ModerationContainer extends Component {
         <ModerationHeader asset={asset} />
         <ModerationMenu
           asset={asset}
+          allCount={data.allCount}
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}

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

@@ -21,7 +21,6 @@ const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loa
             key={i}
             index={i}
             comment={comment}
-            commentType={activeTab}
             selected={i === selectedIndex}
             suspectWords={props.suspectWords}
             bannedWords={props.bannedWords}

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

@@ -23,6 +23,12 @@ const Comment = ({actions = [], comment, ...props}) => {
   const linkText = links ? links.map(link => link.raw) : [];
   const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
   const flagActions = comment.actions && comment.actions.filter(a => a.__typename === 'FlagAction');
+  let commentType = '';
+  if (comment.status === 'PREMOD') {
+    commentType = 'premod';
+  } else if (flagActions && flagActions.length) {
+    commentType = 'flagged';
+  }
 
   return (
     <li tabIndex={props.index} className={`mdl-card ${props.selected ?  'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
@@ -36,7 +42,7 @@ const Comment = ({actions = [], comment, ...props}) => {
               {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
             </span>
             <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status !== 'REJECTED')} />
-            <CommentType type={props.commentType} />
+            <CommentType type={commentType} />
           </div>
           {comment.user.status === 'banned' ?
             <span className={styles.banned}>
@@ -64,6 +70,7 @@ const Comment = ({actions = [], comment, ...props}) => {
                 <ActionButton key={i}
                               type={action}
                               user={comment.user}
+                              status={comment.status}
                               acceptComment={() => props.acceptComment({commentId: comment.id})}
                               rejectComment={() => props.rejectComment({commentId: comment.id})}
                 />

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

@@ -23,7 +23,7 @@ LoadMore.propTypes = {
   comments: PropTypes.array.isRequired,
   loadMore: PropTypes.func.isRequired,
   sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired,
-  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged']).isRequired,
+  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all']).isRequired,
   assetId: PropTypes.string,
   showLoadMore: PropTypes.bool.isRequired
 };

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

@@ -4,22 +4,18 @@ import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
+import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
 
 const lang = new I18n(translations);
 
 const ModerationMenu = (
-  {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort}
+  {asset, allCount, premodCount, rejectedCount, flaggedCount, selectSort, sort}
 ) => {
-  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';
+
+  function getPath (type) {
+    return asset ? `/admin/moderate/${type}/${asset.id}` : `/admin/moderate/${type}`;
+  }
 
   return (
     <div className="mdl-tabs">
@@ -27,22 +23,28 @@ const ModerationMenu = (
         <div className={styles.tabBarPadding} />
         <div>
           <Link
-            to={premodPath}
+            to={getPath('all')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+            <Icon name='question_answer' className={styles.tabIcon} /> {lang.t('modqueue.all')} <CommentCount count={allCount} />
           </Link>
           <Link
-            to={flagPath}
+            to={getPath('premod')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+            <Icon name='access_time' className={styles.tabIcon} /> {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
           </Link>
           <Link
-            to={rejectPath}
+            to={getPath('flagged')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+            <Icon name='flag' className={styles.tabIcon} /> {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+          </Link>
+          <Link
+            to={getPath('rejected')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='close' className={styles.tabIcon} /> {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
           </Link>
         </div>
         <SelectField
@@ -59,6 +61,7 @@ const ModerationMenu = (
 };
 
 ModerationMenu.propTypes = {
+  allCount: PropTypes.number.isRequired,
   premodCount: PropTypes.number.isRequired,
   rejectedCount: PropTypes.number.isRequired,
   flaggedCount: PropTypes.number.isRequired,

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

@@ -418,3 +418,8 @@ span {
 .loadMore:hover {
   background-color: #4399FF;
 }
+
+.tabIcon {
+  position: relative;
+  top: 7px;
+}