From d9d086c61ec3bfa235238f7c56f18e7fb63e09f1 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Mon, 6 Mar 2017 13:53:56 -0700
Subject: [PATCH 01/10] remove a banned comment after it's confirmed as
 rejected

---
 client/coral-framework/graphql/mutations/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js
index a874f8f0c..40469a18e 100644
--- a/client/coral-framework/graphql/mutations/index.js
+++ b/client/coral-framework/graphql/mutations/index.js
@@ -42,6 +42,10 @@ export const postComment = graphql(POST_COMMENT, {
         updateQueries: {
           AssetQuery: (oldData, {mutationResult:{data:{createComment:{comment}}}}) => {
 
+            if (comment.status === 'REJECTED') {
+              return oldData;
+            }
+
             if (oldData.asset.settings.moderation === 'PRE') {
               return oldData;
             }

From 3a31ca8d3892074382d4558f218fd80671291311 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 7 Mar 2017 10:06:03 -0700
Subject: [PATCH 02/10] blur the comment until it's ready

---
 client/coral-embed-stream/src/Comment.css         | 7 ++++++-
 client/coral-embed-stream/src/Comment.js          | 1 +
 client/coral-framework/graphql/mutations/index.js | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/src/Comment.css b/client/coral-embed-stream/src/Comment.css
index 7bc1a21f4..6966d82ab 100644
--- a/client/coral-embed-stream/src/Comment.css
+++ b/client/coral-embed-stream/src/Comment.css
@@ -3,5 +3,10 @@
 }
 
 .Comment {
-  
+
+}
+
+.pendingComment {
+  filter: blur(2px);
+  pointer-events: none;
 }
diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 72449c906..059c366ff 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/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' ? ' pendingComment' : '';
 
     // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
     const notifyOnError = (fn, errorToMessage) => async () => {
diff --git a/client/coral-framework/graphql/mutations/index.js b/client/coral-framework/graphql/mutations/index.js
index 40469a18e..d319c2f8f 100644
--- a/client/coral-framework/graphql/mutations/index.js
+++ b/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'
             }
           }
         },

From 5e4c251e835e82a24fab61dc0f2373f902a7a673 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 7 Mar 2017 10:47:51 -0700
Subject: [PATCH 03/10] style the pending comment correctly

---
 client/coral-embed-stream/src/Comment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 059c366ff..0a3cdb78b 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/client/coral-embed-stream/src/Comment.js
@@ -116,7 +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' ? ' pendingComment' : '';
+    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 () => {

From 95aa89faed81ed5b1530d19f5ffb1a7acae877ec Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 7 Mar 2017 14:16:44 -0500
Subject: [PATCH 04/10] Switching premod status update to updateQueries
 function.

---
 .../src/graphql/mutations/index.js            | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/graphql/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js
index fe3a1faf9..884e30e0c 100644
--- a/client/coral-admin/src/graphql/mutations/index.js
+++ b/client/coral-admin/src/graphql/mutations/index.js
@@ -22,7 +22,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'ACCEPTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            const premod = oldData.premod.filter(c => c.id !== commentId);
+            const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            const rejected = oldData.rejected.filter(c => c.id !== commentId);
+            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
+            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
+            const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
+
+            return {
+              ...oldData,
+              premodCount,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected,
+            };
+          }
+        }
       });
     },
     rejectComment: ({commentId}) => {
@@ -31,7 +50,27 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'REJECTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0];
+            const rejected = [comment].concat(oldData.rejected);
+            const premod = oldData.premod.filter(c => c.id !== commentId);
+            const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
+            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
+            const rejectedCount = oldData.rejectedCount + 1;
+
+            return {
+              ...oldData,
+              premodCount,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected
+            };
+          }
+        }
       });
     }
   })

From f563bcf1191617b9d5a6014e2b8f9765094118f2 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Mar 2017 16:35:01 -0500
Subject: [PATCH 05/10] Adding fix for long text

---
 .../ModerationQueue/components/ModerationHeader.js     |  2 +-
 .../containers/ModerationQueue/components/styles.css   | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
index c5a11b642..29e720337 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
@@ -11,7 +11,7 @@ const ModerationHeader = props => (
             <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}
+                <span>{props.asset.title}</span>
                 <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
               </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index 59f47faad..fd0eb4b9c 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -114,7 +114,15 @@ span {
       }
 
       &:nth-child(2) {
-       text-align: center;
+        span {
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          max-width: 344px;
+          display: inline-block;
+          vertical-align: top;
+        }
       }
 
       &:last-child {

From af4a69a67704581d7f92ab14a393e46af059e636 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Mar 2017 16:50:36 -0500
Subject: [PATCH 06/10] Changing icon and link

---
 .../ModerationQueue/components/ModerationHeader.js        | 8 ++++----
 .../src/containers/ModerationQueue/components/styles.css  | 8 +++-----
 client/coral-ui/components/Icon.js                        | 2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
index 29e720337..260097979 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
@@ -10,10 +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">
-                <span>{props.asset.title}</span>
-                <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
-              </a>
+                <a className="mdl-tabs__tab" href={props.asset.url}>
+                    <span> {props.asset.title}</span>
+                    <Icon className={styles.settingsButton} name="open_in_new"/>
+                </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
             </div>
             :
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index fd0eb4b9c..d3e811b53 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -84,11 +84,9 @@ span {
   margin-bottom: -1px;
 
   .settingsButton {
-    i {
-      vertical-align: middle;
-      margin-left: 10px;
-      margin-top: -4px;
-    }
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-top: -4px;
   }
 
   .moderateAsset {
diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js
index 65bf52f72..11432c753 100644
--- a/client/coral-ui/components/Icon.js
+++ b/client/coral-ui/components/Icon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Icon as IconMDL}  from 'react-mdl';
 
-const Icon = ({className, name}) => (
+const Icon = ({className = '', name}) => (
   <IconMDL className={className} name={name} />
 );
 

From cceeafadeccfbdd52817313f2ba5df60f161ae21 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 7 Mar 2017 16:53:42 -0500
Subject: [PATCH 07/10] Indent

---
 .../ModerationQueue/components/ModerationHeader.js        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
index 260097979..8d9f6b7e0 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js
@@ -10,10 +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" href={props.asset.url}>
-                    <span> {props.asset.title}</span>
-                    <Icon className={styles.settingsButton} name="open_in_new"/>
-                </a>
+              <a className="mdl-tabs__tab" href={props.asset.url}>
+                <span>{props.asset.title}</span>
+                <Icon className={styles.settingsButton} name="open_in_new"/>
+              </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
             </div>
             :

From 0863ca26ff357b5d0309578e0ceb494b04ae5383 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 8 Mar 2017 09:56:36 -0700
Subject: [PATCH 08/10] update dashboard links

---
 .../src/containers/Dashboard/FlagWidget.js        | 13 +++++++------
 .../src/containers/Dashboard/LikeWidget.js        | 13 +++++++------
 .../src/containers/Dashboard/Widget.css           | 15 +++++++++++++++
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index da71ac04a..4b86ec7d7 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/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. */
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index 25e851966..d52676ae4 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/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. */
diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css
index cb764d9cc..3170cf332 100644
--- a/client/coral-admin/src/containers/Dashboard/Widget.css
+++ b/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;

From 3262d136b730d7b046984396fbdbb4ea6c4ee51e Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Wed, 8 Mar 2017 15:44:19 -0500
Subject: [PATCH 09/10] Resetting report menu on close.

---
 client/coral-plugin-flags/FlagButton.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js
index 537d899cd..45110f407 100644
--- a/client/coral-plugin-flags/FlagButton.js
+++ b/client/coral-plugin-flags/FlagButton.js
@@ -32,18 +32,30 @@ class FlagButton extends Component {
     if (flagged) {
       this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true});
       deleteAction(localPost || flag.current_user.id);
+    } else if (this.state.showMenu){
+      this.closeMenu();
     } else {
-      this.setState({showMenu: !this.state.showMenu});
+      this.setState({showMenu: true});
     }
   }
 
+  closeMenu = () => {
+    this.setState({
+      showMenu: false,
+      itemType: '',
+      reason: '',
+      message: '',
+      step: 0
+    });
+  }
+
   onPopupContinue = () => {
     const {postFlag, postDontAgree, id, author_id} = this.props;
     const {itemType, reason, step, posted, message} = this.state;
 
     // Proceed to the next step or close the menu if we've reached the end
     if (step + 1 >= this.props.getPopupMenu.length) {
-      this.setState({showMenu: false});
+      this.closeMenu();
     } else {
       this.setState({step: step + 1});
     }
@@ -114,7 +126,7 @@ class FlagButton extends Component {
   }
 
   handleClickOutside () {
-    this.setState({showMenu: false});
+    this.closeMenu();
   }
 
   render () {

From ce7a2d54d09781eab1696536b3689c04030465e9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 9 Mar 2017 10:59:28 -0500
Subject: [PATCH 10/10] Font Size

---
 .../src/containers/ModerationQueue/components/styles.css         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index d3e811b53..627cde5e4 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -87,6 +87,7 @@ span {
     vertical-align: middle;
     margin-left: 10px;
     margin-top: -4px;
+    font-size: 16px;
   }
 
   .moderateAsset {