show total comments and rejected %

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

@@ -208,7 +208,11 @@ class ModerationContainer extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
-        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} hideUserDetail={hideUserDetail}/>}
+        {moderation.userDetailId && (
+          <UserDetail
+            id={moderation.userDetailId}
+            hideUserDetail={hideUserDetail} />
+        )}
       </div>
     );
   }

client/coral-admin/src/containers/ModerationQueue/UserDetail.css

@@ -10,3 +10,23 @@
 .small {
   color: #aaa;
 }
+
+.stats {
+  display: flex;
+
+  .stat {
+    margin: 0 4px 12px;
+  }
+
+  .stat:last-child {
+    margin-right: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .stat p:first-child {
+    font-weight: bold;
+  }
+}

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

@@ -28,13 +28,20 @@ class UserDetail extends React.Component {
       return null;
     }
 
-    const {user} = data;
+    const {user, totalComments, rejectedComments} = data;
     const localProfile = user.profiles.find((p) => p.provider === 'local');
     let profile;
     if (localProfile) {
       profile = localProfile.id;
     }
 
+    let rejectedPercent = rejectedComments / totalComments;
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
+
+      // if totalComments is 0, you're dividing by zero, which is naughty
+      rejectedPercent = 0;
+    }
+
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
@@ -48,6 +55,14 @@ class UserDetail extends React.Component {
           <br/><small className={styles.small}>Data represents the last six months of activity</small>
         </p>
         <div className={styles.stats}>
+          <div className={styles.stat}>
+            <p>Total Comments</p>
+            <p>{totalComments}</p>
+          </div>
+          <div className={styles.stat}>
+            <p>Reject Rate</p>
+            <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
+          </div>
         </div>
       </Drawer>
     );