show comments on the UserDetail drawer

client/coral-admin/src/components/ActionButton.js

@@ -17,11 +17,11 @@ const ActionButton = ({type = '', active, ...props}) => {
 
   return (
     <Button
-      className={`${typeName} ${styles.actionButton} ${active ? styles[`${typeName}__active`] : ''}`}
+      className={`${typeName} ${styles.actionButton} ${props.minimal ? styles.minimal : ''} ${active ? styles[`${typeName}__active`] : ''}`}
       cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{t(`modqueue.${text}`)}</Button>
+    >{props.minimal ? '' : t(`modqueue.${text}`)}</Button>
   );
 };
 

client/coral-admin/src/components/ModerationList.css

@@ -189,6 +189,12 @@
   width: 140px;
 }
 
+.minimal {
+  width: 45px;
+  min-width: 0;
+  float: right;
+}
+
 .approve__active {
   box-shadow: none;
   color: white;

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

@@ -254,7 +254,13 @@ class ModerationContainer extends Component {
         {moderation.userDetailId && (
           <UserDetail
             id={moderation.userDetailId}
-            hideUserDetail={hideUserDetail} />
+            hideUserDetail={hideUserDetail}
+            bannedWords={settings.wordlist.banned}
+            suspectWords={settings.wordlist.suspect}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment} />
         )}
       </div>
     );

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

@@ -36,6 +36,6 @@
   background-color: transparent;
   font-size: 16px;
   position: absolute;
-  width: 100%;
+  width: 90%;
   outline: none;
 }

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

@@ -4,10 +4,18 @@ import styles from './UserDetail.css';
 import {compose} from 'react-apollo';
 import {getUserDetail} from 'coral-admin/src/graphql/queries';
 import Slot from 'coral-framework/components/Slot';
+import Comment from './components/Comment';
+import {actionsMap} from './helpers/moderationQueueActionsMap';
 
 class UserDetail extends React.Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
+    bannedWords: PropTypes.array.isRequired,
+    suspectWords: PropTypes.array.isRequired,
+    showBanUserDialog: PropTypes.func.isRequired,
+    showSuspendUserDialog: PropTypes.func.isRequired,
+    acceptComment: PropTypes.func.isRequired,
+    rejectComment: PropTypes.func.isRequired,
     hideUserDetail: PropTypes.func.isRequired
   }
 
@@ -22,13 +30,22 @@ class UserDetail extends React.Component {
   }
 
   render () {
-    const {data, hideUserDetail} = this.props;
+    const {
+      data,
+      hideUserDetail,
+      bannedWords,
+      suspectWords,
+      showBanUserDialog,
+      showSuspendUserDialog,
+      acceptComment,
+      rejectComment
+    } = this.props;
 
     if (!('user' in data)) {
       return null;
     }
 
-    const {user, totalComments, rejectedComments} = data;
+    const {user, comments, totalComments, rejectedComments} = data;
     const localProfile = user.profiles.find((p) => p.provider === 'local');
     let profile;
     if (localProfile) {
@@ -64,6 +81,29 @@ class UserDetail extends React.Component {
             <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
           </div>
         </div>
+        <div>
+          {
+            comments.map((comment, i) => {
+              const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+              return <Comment
+                key={i}
+                index={i}
+                comment={comment}
+                selected={false}
+                suspectWords={suspectWords}
+                bannedWords={bannedWords}
+                viewUserDetail={() => {}}
+                actions={actionsMap[status]}
+                showBanUserDialog={showBanUserDialog}
+                showSuspendUserDialog={showSuspendUserDialog}
+                acceptComment={acceptComment}
+                rejectComment={rejectComment}
+                currentAsset={null}
+                currentUserId={this.props.id}
+                minimal={true} />;
+            })
+          }
+        </div>
       </Drawer>
     );
   }

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -23,6 +23,7 @@ const Comment = ({
   viewUserDetail,
   suspectWords,
   bannedWords,
+  minimal,
   ...props
 }) => {
   const links = linkify.getMatches(comment.body);
@@ -118,6 +119,7 @@ const Comment = ({
                   (action === 'APPROVE' && comment.status === 'ACCEPTED');
                 return (
                   <ActionButton
+                    minimal={minimal}
                     key={i}
                     type={action}
                     user={comment.user}
@@ -153,6 +155,7 @@ const Comment = ({
 };
 
 Comment.propTypes = {
+  minimal: PropTypes.bool,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,

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

@@ -1,3 +1,5 @@
+#import "../fragments/commentView.graphql"
+
 query UserDetail ($author_id: ID!) {
   user(id: $author_id) {
     id
@@ -10,4 +12,10 @@ query UserDetail ($author_id: ID!) {
   }
   totalComments: commentCount(query: {author_id: $author_id})
   rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
+  comments: comments(query: {
+    author_id: $author_id,
+    statuses: [NONE, PREMOD, ACCEPTED, REJECTED]
+  }) {
+    ...commentView
+  }
 }

client/coral-ui/components/Drawer.css

@@ -1,15 +1,25 @@
 .drawer {
   max-width: 700px;
-  min-width: 400px;
-  padding: 20px;
+  min-width: 550px;
   position: fixed;
   top: 0;
-  right: 0;
+  right: -17px;
   bottom: 0;
   background-color: white;
   transition: transform 500ms ease-in-out;
   box-shadow: -3px 0px 4px 0px rgba(0,0,0,0.15);
   z-index: 10000;
+
+  .content {
+    position: absolute;
+    padding: 20px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
 }
 
 .closeButton {

client/coral-ui/components/Drawer.js

@@ -6,7 +6,9 @@ const Drawer = ({children, handleClickOutside}) => {
   return (
     <div className={styles.drawer}>
       <div className={styles.closeButton} onClick={handleClickOutside}>×</div>
-      {children}
+      <div className={styles.content}>
+        {children}
+      </div>
     </div>
   );
 };

graph/typeDefs.graphql

@@ -148,6 +148,9 @@ enum ACTION_TYPE {
 # CommentsQuery allows the ability to query comments by a specific methods.
 input CommentsQuery {
 
+  # Author of the comments
+  author_id: ID
+
   # Current status of a comment. Requires the `ADMIN` role.
   statuses: [COMMENT_STATUS!]