Merge branch 'master' into long-titles

client/coral-admin/src/containers/Dashboard/FlagWidget.js

@@ -16,7 +16,7 @@ const FlagWidget = (props) => {
         <thead className={styles.widgetHead}>
           <tr>
             <th>{lang.t('streams.article')}</th>
-            <th>{lang.t('dashboard.flags')}</th>
+            <th colSpan='2'>{lang.t('dashboard.flags')}</th>
           </tr>
         </thead>
         <tbody>
@@ -27,20 +27,21 @@ const FlagWidget = (props) => {
               return (
                 <tr className={styles.rowLinkify} key={asset.id}>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
+                    <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
                       <p className={styles.assetTitle}>{asset.title}</p>
                       <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
                     </Link>
                   </td>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                    </Link>
+                    <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
+                  </td>
+                  <td>
+                    <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
                   </td>
                 </tr>
               );
             })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_flags')}</td></tr>
+            : <tr className={styles.rowLinkify}><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
           }
           { /* rows in a table with a fixed height will expand and ignore height.
                 this extra row will expand to fill the extra space. */

client/coral-admin/src/containers/Dashboard/LikeWidget.js

@@ -17,7 +17,7 @@ const LikeWidget = (props) => {
         <thead className={styles.widgetHead}>
           <tr>
             <th>{lang.t('streams.article')}</th>
-            <th>{lang.t('modqueue.likes')}</th>
+            <th colSpan='2'>{lang.t('modqueue.likes')}</th>
           </tr>
         </thead>
         <tbody>
@@ -28,20 +28,21 @@ const LikeWidget = (props) => {
               return (
                 <tr className={styles.rowLinkify} key={asset.id}>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
+                    <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
                       <p className={styles.assetTitle}>{asset.title}</p>
                       <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
                     </Link>
                   </td>
                   <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                    </Link>
+                    <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
+                  </td>
+                  <td>
+                    <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
                   </td>
                 </tr>
               );
             })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_likes')}</td></tr>
+            : <tr className={styles.rowLinkify}><td colSpan="3">{lang.t('dashboard.no_likes')}</td></tr>
           }
           { /* rows in a table with a fixed height will expand and ignore height.
                 this extra row will expand to fill the extra space. */

client/coral-admin/src/containers/Dashboard/Widget.css

@@ -55,11 +55,26 @@
   padding: 10px;
 }
 
+.widgetTable tbody td:last-child {
+  padding-top: 0;
+}
+
 .linkToAsset {
   display: block;
   text-decoration: none;
 }
 
+.linkToModerate {
+  background-color: #e0e0e0;
+  padding: 10px 14px;
+  text-decoration: none;
+  color: black;
+}
+
+.linkToModerate:hover {
+  background-color: #ccc;
+}
+
 .lede {
   font-size: 0.9em;
   color: #aaa;

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

@@ -26,23 +26,21 @@ class ModerationContainer extends Component {
 
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
-    const {selectedIndex} = this.state;
-
+    
     this.props.fetchSettings();
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
     key('esc', () => toggleModal(false));
-    key('j', () => this.setState({selectedIndex: selectedIndex + 1}));
-    key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex}));
-    key('r', () => this.moderate(false));
-    key('t', () => this.moderate(true));
+    key('j', this.select(true));
+    key('k', this.select(false));
+    key('r', this.moderate(false));
+    key('t', this.moderate(true));
   }
 
-  moderate = (accept) => {
-    const {data, route, acceptComment, rejectComment} = this.props;
+  moderate = (accept) => () => {
+    const {acceptComment, rejectComment} = this.props;
     const {selectedIndex} = this.state;
-    const activeTab = route.path === ':id' ? 'premod' : route.path;
-    const comments = data[activeTab];
+    const comments = this.getComments();
     const commentId = {commentId: comments[selectedIndex].id};
 
     if (accept) {
@@ -50,7 +48,30 @@ class ModerationContainer extends Component {
     } else {
       rejectComment(commentId);
     }
+  }
 
+  getComments = () => {
+    const {data, route} = this.props;
+    const activeTab = route.path === ':id' ? 'premod' : route.path;
+    return data[activeTab];
+  }
+
+  select = (next) => () => {
+    if (next) {
+      this.setState(prevState =>
+        ({
+          ...prevState,
+          selectedIndex: prevState.selectedIndex < this.getComments().length - 1
+            ? prevState.selectedIndex + 1 : prevState.selectedIndex
+        }));
+    } else {
+      this.setState(prevState =>
+        ({
+          ...prevState,
+          selectedIndex: prevState.selectedIndex > 0 ?
+            prevState.selectedIndex - 1 : prevState.selectedIndex
+        }));
+    }
   }
 
   componentWillUnmount() {

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

@@ -3,5 +3,10 @@
 }
 
 .Comment {
-  
+
+}
+
+.pendingComment {
+  filter: blur(2px);
+  pointer-events: none;
 }

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

@@ -116,6 +116,7 @@ class Comment extends React.Component {
     const dontagree = getActionSummary('DontAgreeActionSummary', comment);
     let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
     commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
+    commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
     const notifyOnError = (fn, errorToMessage) => async () => {

client/coral-framework/graphql/mutations/index.js

@@ -35,7 +35,7 @@ export const postComment = graphql(POST_COMMENT, {
               action_summaries: [],
               tags: [],
               status: null,
-              id: `${Date.now()}_temp_id`
+              id: 'pending'
             }
           }
         },