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>
     );

client/coral-admin/src/graphql/queries/index.js

@@ -99,7 +99,7 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
 export const getUserDetail = graphql(USER_DETAIL, {
   options: ({id}) => {
     return {
-      variables: {id}
+      variables: {author_id: id}
     };
   }
 });

client/coral-admin/src/graphql/queries/userDetail.graphql

@@ -1,5 +1,5 @@
-query UserDetail ($id: ID!) {
-  user(id: $id) {
+query UserDetail ($author_id: ID!) {
+  user(id: $author_id) {
     id
     username
     created_at
@@ -8,4 +8,6 @@ query UserDetail ($id: ID!) {
       provider
     }
   }
+  totalComments: commentCount(query: {author_id: $author_id})
+  rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
 }

client/coral-ui/components/Drawer.css

@@ -1,5 +1,6 @@
 .drawer {
   max-width: 700px;
+  min-width: 400px;
   padding: 20px;
   position: fixed;
   top: 0;
@@ -8,6 +9,7 @@
   background-color: white;
   transition: transform 500ms ease-in-out;
   box-shadow: -3px 0px 4px 0px rgba(0,0,0,0.15);
+  z-index: 10000;
 }
 
 .closeButton {