From ac89ddc43ff43717cd2a3dc0521028e563ef0f01 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 21 Jun 2017 11:04:45 -0300
Subject: [PATCH] Show user details from flag history

---
 .../src/routes/Moderation/components/Comment.js    |  1 +
 .../src/routes/Moderation/components/FlagBox.css   | 14 ++++++++++++++
 .../src/routes/Moderation/components/FlagBox.js    | 13 +++++++++----
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 3d946f9fc..3d3e2803f 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -217,6 +217,7 @@ class Comment extends React.Component {
           ? <FlagBox
               actions={flagActions}
               actionSummaries={flagActionSummaries}
+              viewUserDetail={() => viewUserDetail(comment.user.id)}
             />
           : null}
       </li>
diff --git a/client/coral-admin/src/routes/Moderation/components/FlagBox.css b/client/coral-admin/src/routes/Moderation/components/FlagBox.css
index 5b8ea4f91..402a88045 100644
--- a/client/coral-admin/src/routes/Moderation/components/FlagBox.css
+++ b/client/coral-admin/src/routes/Moderation/components/FlagBox.css
@@ -67,3 +67,17 @@
     color: black;
   }
 }
+
+.username {
+  color: #393B44;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 2px;
+  margin-left: -5px;
+  transition: background-color 200ms ease;
+&:hover {
+   background-color: #E0E0E0;
+ }
+}
diff --git a/client/coral-admin/src/routes/Moderation/components/FlagBox.js b/client/coral-admin/src/routes/Moderation/components/FlagBox.js
index 7dff51fdb..caa8b3fbc 100644
--- a/client/coral-admin/src/routes/Moderation/components/FlagBox.js
+++ b/client/coral-admin/src/routes/Moderation/components/FlagBox.js
@@ -33,7 +33,7 @@ class FlagBox extends Component {
   }
 
   render() {
-    const {actionSummaries, actions} = this.props;
+    const {actionSummaries, actions, viewUserDetail} = this.props;
     const {showDetail} = this.state;
 
     return (
@@ -59,9 +59,14 @@ class FlagBox extends Component {
                     <li key={i}>
                       {this.reasonMap(summary.reason)} (<strong>{summary.count}</strong>)
                       <ul>
-                        {
-                          actionList.map((action, j) => <li key={`${i}_${j}`} className={styles.subDetail}><span>{action.user.username}</span> {action.message}</li>)
-                        }
+                        {actionList.map((action, j) =>
+                          <li key={`${i}_${j}`} className={styles.subDetail}>
+                            <a className={styles.username} onClick={viewUserDetail}>
+                              {action.user.username}
+                            </a>
+                            {action.message}
+                          </li>
+                        )}
                       </ul>
                     </li>
                   );