Merge branch 'actions-user-drawer' of github.com:coralproject/talk into user-status-refactor

client/coral-admin/src/actions/banUserDialog.js

@@ -4,4 +4,3 @@ export const showBanUserDialog = ({userId, username, commentId, commentStatus})
   ({type: SHOW_BAN_USER_DIALOG, userId, username, commentId, commentStatus});
 
 export const hideBanUserDialog = () => ({type: HIDE_BAN_USER_DIALOG});
-

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

@@ -8,9 +8,6 @@
   color: black;
   > :global(.mdl-menu__container) {
     margin-left: 10px;
-    > :global(.mdl-menu__outline) {
-      box-shadow: none;
-    }
   }
 }
 
@@ -18,12 +15,13 @@
   box-shadow: none;
   color: white;
   background-color: #616161;
+  border-color: #616161;
 }
 
 .arrowIcon {
   margin-left: 6px;
   margin-right: 0;
-  vertical-align: middle;
+  vertical-align: middle; 
   margin-right: 0;
   font-size: 14px;
 }
@@ -33,8 +31,10 @@
 }
 
 .menuItem {
-  background-color: #2a2a2a;
-  color: white;
+  color: #2a2a2a;
+  background-color: white;
+  font-size: 0.95em;
+
   &:first-child {
     margin-bottom: 1px;
     border-radius: 2px 2px 0px 0px;
@@ -43,7 +43,7 @@
     border-radius: 0px 0px 2px 2px;
   }
   &:hover, &:active, &:focus {
-    background-color: #767676;
+    background-color: #e2e2e2;
   }
   &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
     background-color: #262626;

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

@@ -32,18 +32,18 @@ class ActionsMenu extends React.Component {
   };
 
   render() {
-    const {className = ''} = this.props;
+    const {className = '', buttonClassNames = '', label = ''} = this.props;
     return (
       <div className={cn(styles.root, className)} onBlur={this.syncOpenState} >
         <Button
           cStyle='actions'
-          className={cn(styles.button, {[styles.buttonOpen]: this.state.open})}
+          className={cn(styles.button, {[styles.buttonOpen]: this.state.open}, buttonClassNames)}
           disabled={false}
           id={this.id}
           onClick={this.syncOpenState}
           icon={this.props.icon}
           raised>
-          {t('modqueue.actions')}
+          {label ? label : t('modqueue.actions')}
           <Icon
             name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
             className={styles.arrowIcon}
@@ -61,6 +61,8 @@ ActionsMenu.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
+  label: PropTypes.string,
+  buttonClassNames: PropTypes.string,
 };
 
 export default ActionsMenu;

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

@@ -165,4 +165,24 @@
 .tabButtonActive {
   font-weight: bold;
   border-bottom: 3px solid #F36451;
-}
+}
+.username {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.actionsMenu {
+  display: inline-block;
+}
+
+.actionsMenuSuspended {
+  background-color: #F29336;
+  border-color: #F29336;
+  color: white;
+}
+
+.actionsMenuBanned {
+  background-color: #E45241;
+  border-color: #E45241;
+  color: white;
+}

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

@@ -13,7 +13,11 @@ import {getReliability} from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import {Icon, Drawer, Spinner, TabBar, Tab, TabContent, TabPane} from 'coral-ui';
-
+import LoadMore from '../components/LoadMore';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import UserInfoTooltip from './UserInfoTooltip';
+ 
 class UserDetail extends React.Component {
 
   rejectThenReload = async (info) => {
@@ -66,6 +70,7 @@ class UserDetail extends React.Component {
 
   render() {
 
+<<<<<<< HEAD
     if (this.props.loading) {
       return (
         <ClickOutside onClickOutside={this.props.hideUserDetail}>
@@ -76,6 +81,41 @@ class UserDetail extends React.Component {
       );
     }
 
+=======
+  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
+    userId: this.props.root.user.id,
+    username: this.props.root.user.username,
+  });
+
+  showBanUserDialog = () => this.props.showBanUserDialog({
+    userId: this.props.root.user.id,
+    username: this.props.root.user.username,
+  });
+
+  renderLoading() {
+    return (
+      <ClickOutside onClickOutside={this.props.hideUserDetail}>
+        <Drawer onClose={this.props.hideUserDetail}>
+          <Spinner />
+        </Drawer>
+      </ClickOutside>
+    );
+  }
+
+  getActionMenuLabel() {
+    const {root: {user}} = this.props;
+    
+    if (user.status === 'BANNED') {
+      return 'Banned';
+    } else if (user.suspension.until && new Date(user.suspension.until) > new Date()) {
+      return 'Suspended';
+    } else {
+      return '';
+    }
+  }
+
+  renderLoaded() {
+>>>>>>> c53fe4b1976db5b4644e2a48d03c85c3fdf56733
     const {
       data,
       root,
@@ -102,10 +142,54 @@ class UserDetail extends React.Component {
       rejectedPercent = 0;
     }
 
+    const suspended =
+      user &&
+      user.suspension.until &&
+      new Date(user.suspension.until) > new Date();
+
+    const banned = user.status === 'BANNED';
+
     return (
       <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
-          <h3>{user.username}</h3>
+        <Drawer className="talk-admin-user-detail-drawer" onClose={hideUserDetail}>
+          <h3 className={cn(styles.username, 'talk-admin-user-detail-username')}>
+            {user.username}
+          </h3>
+
+          {user.id &&
+            <ActionsMenu
+              icon="person"
+              className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}
+              buttonClassNames={cn({
+                [styles.actionsMenuSuspended]: suspended,
+                [styles.actionsMenuBanned]: banned,
+              }, 'talk-admin-user-detail-actions-button')}
+              label={this.getActionMenuLabel()}>
+
+              {suspended && <ActionsMenuItem
+                onClick={this.showSuspenUserDialog}>
+                Remove Suspension
+              </ActionsMenuItem>}
+
+              {banned && <ActionsMenuItem
+                onClick={this.showSuspenUserDialog}>
+                Remove Ban
+              </ActionsMenuItem>}
+
+              {!suspended && <ActionsMenuItem
+                onClick={this.showSuspenUserDialog}>
+                Suspend User
+              </ActionsMenuItem>}
+
+              {!banned && <ActionsMenuItem
+                onClick={this.showBanUserDialog}>
+                Ban User
+              </ActionsMenuItem>}
+
+            </ActionsMenu>
+          }
+
+          {banned || suspended && <UserInfoTooltip user={user} banned={banned} suspended={suspended} />}
 
           <div>
             <ul className={styles.userDetailList}>
@@ -251,7 +335,10 @@ class UserDetail extends React.Component {
 }
 
 UserDetail.propTypes = {
+<<<<<<< HEAD
   userId: PropTypes.string.isRequired,
+=======
+>>>>>>> c53fe4b1976db5b4644e2a48d03c85c3fdf56733
   hideUserDetail: PropTypes.func.isRequired,
   root: PropTypes.object.isRequired,
   acceptComment: PropTypes.func.isRequired,
@@ -269,7 +356,13 @@ UserDetail.propTypes = {
   selectedCommentIds: PropTypes.array.isRequired,
   viewUserDetail: PropTypes.any.isRequired,
   loadMore: PropTypes.any.isRequired,
+<<<<<<< HEAD
   notify: PropTypes.func.isRequired
+=======
+  notify: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+>>>>>>> c53fe4b1976db5b4644e2a48d03c85c3fdf56733
 };
 
 export default UserDetail;

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

@@ -0,0 +1,65 @@
+.userInfo {
+  position: relative;
+  display: inline-block;
+}
+
+.icon {
+  font-size: 16px;
+  color: #616161;
+  -ms-user-select:none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout:none;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.menu {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 32px;
+  right: 0px;
+  width: 140px;
+  text-align: left;
+  color: #616161;
+}
+
+.menu::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  right: 0px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.menu::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  right: 0px;
+  top: -19px;
+  transform: rotate(180deg);
+}
+
+.descriptionList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.descriptionItem {
+  font-size: 0.9em;
+}

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import {Icon} from 'coral-ui';
+import styles from './UserInfoTooltip.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+
+const initialState = {menuVisible: false};
+
+class UserInfoTooltip extends React.Component {
+  state = initialState;
+
+  toogleMenu = () => {
+    this.setState({menuVisible: !this.state.menuVisible});
+  }
+
+  hideMenu = () => {
+    this.setState({menuVisible: false});
+  }
+
+  render() {
+    const {menuVisible} = this.state;
+    const {banned, suspended} = this.props;
+
+    return (
+      <ClickOutside onClickOutside={this.hideMenu}>
+        <div className={cn(styles.userInfo, 'talk-admin-user-info-tooltip')}>
+          <span onClick={this.toogleMenu} className={cn(styles.icon, 'talk-admin-user-info-tooltip-icon')}>
+            <Icon name="info_outline" />
+          </span>
+
+          {menuVisible && (
+            <div className={cn(styles.menu, 'talk-admin-user-info-tooltip-menu')}>
+              {
+                banned && (
+                  <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-banned')}>
+                    <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>Banned On</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>By</strong>
+                        <span></span>
+                      </li>
+                    </ul>
+                  </div>
+                )
+              }
+
+              {
+                suspended && (
+                  <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-suspended')}>
+                    <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>Suspension</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>By</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>Start</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>End</strong>
+                        <span></span>
+                      </li>
+                    </ul>
+                  </div>
+                )
+              }
+            </div>
+          )}
+        </div>
+      </ClickOutside>
+    );
+  }
+}
+
+UserInfoTooltip.propTypes = {
+  user: PropTypes.object,
+  banned: PropTypes.bool,
+  suspended: PropTypes.bool,
+};
+
+export default UserInfoTooltip;

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

@@ -18,6 +18,8 @@ import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
 import {notify} from 'coral-framework/actions/notification';
+import {showBanUserDialog} from 'actions/banUserDialog';
+import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
@@ -224,6 +226,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
+    showBanUserDialog,
+    showSuspendUserDialog,
     changeUserDetailStatuses,
     clearUserDetailSelections,
     toggleSelectCommentInUserDetail,

client/coral-admin/src/routes/Community/components/FlaggedAccounts.js

@@ -13,8 +13,6 @@ class FlaggedAccounts extends React.Component {
     const {
       users,
       loadMore,
-      showBanUserDialog,
-      showSuspendUserDialog,
       showRejectUsernameDialog,
       approveUser,
       me,
@@ -48,8 +46,6 @@ class FlaggedAccounts extends React.Component {
                       <FlaggedUser
                         user={user}
                         key={user.id}
-                        showBanUserDialog={showBanUserDialog}
-                        showSuspendUserDialog={showSuspendUserDialog}
                         showRejectUsernameDialog={showRejectUsernameDialog}
                         approveUser={approveUser}
                         me={me}
@@ -74,8 +70,6 @@ class FlaggedAccounts extends React.Component {
 FlaggedAccounts.propTypes = {
   users: PropTypes.object,
   loadMore: PropTypes.func,
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,
   me: PropTypes.object,

client/coral-admin/src/routes/Community/components/FlaggedUser.js

@@ -4,11 +4,8 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import {username} from 'talk-plugin-flags/helpers/flagReasons';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
-import get from 'lodash/get';
 
 const shortReasons = {
   [username.other]: t('community.other'),
@@ -20,18 +17,10 @@ const shortReasons = {
 
 class User extends React.Component {
 
-  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
-  showBanUserDialog = () => this.props.showBanUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
   viewAuthorDetail = () => this.props.viewUserDetail(this.props.user.id);
+
   showRejectUsernameDialog = () => this.props.showRejectUsernameDialog({id: this.props.user.id});
+
   approveUser = () => this.props.approveUser({
     userId: this.props.user.id,
   });
@@ -41,7 +30,6 @@ class User extends React.Component {
       user,
       viewUserDetail,
       selected,
-      me,
       className,
     } = this.props;
 
@@ -56,20 +44,6 @@ class User extends React.Component {
                 className={styles.button}>
                 {user.username}
               </button>
-              {me.id !== user.id &&
-                <ActionsMenu icon="not_interested">
-                  <ActionsMenuItem
-                    disabled={get(user, 'status.suspension.until')}
-                    onClick={this.showSuspenUserDialog}>
-                    Suspend User
-                  </ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={get(user, 'status.banned.status') === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
             </div>
           </div>
           <div className={cn('talk-admin-community-flagged-user-body', styles.body)}>
@@ -137,8 +111,6 @@ class User extends React.Component {
 }
 
 User.propTypes = {
-  showSuspendUserDialog: PropTypes.func,
-  showBanUserDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,

client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js

@@ -5,10 +5,7 @@ import {compose, gql} from 'react-apollo';
 import {withFragments} from 'plugin-api/beta/client/hocs';
 import {Spinner} from 'coral-ui';
 import PropTypes from 'prop-types';
-
 import {withApproveUsername} from 'coral-framework/graphql/mutations';
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {showRejectUsernameDialog} from '../../../actions/community';
 import {viewUserDetail} from '../../../actions/userDetail';
 import {getDefinitionName} from 'coral-framework/utils';
@@ -60,8 +57,6 @@ class FlaggedAccountsContainer extends Component {
     }
     return (
       <FlaggedAccounts
-        showBanUserDialog={this.props.showBanUserDialog}
-        showSuspendUserDialog={this.props.showSuspendUserDialog}
         showRejectUsernameDialog={this.props.showRejectUsernameDialog}
         viewUserDetail={this.props.viewUserDetail}
         approveUser={this.approveUser}
@@ -76,13 +71,11 @@ class FlaggedAccountsContainer extends Component {
 }
 
 FlaggedAccountsContainer.propTypes = {
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
   approveUsername: PropTypes.func,
   data: PropTypes.object,
-  root: PropTypes.object
+  root: PropTypes.object,
 };
 
 const LOAD_MORE_QUERY = gql`
@@ -110,8 +103,6 @@ const LOAD_MORE_QUERY = gql`
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    showBanUserDialog,
-    showSuspendUserDialog,
     showRejectUsernameDialog,
     viewUserDetail,
   }, dispatch);

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -8,8 +8,6 @@ import styles from './Comment.css';
 import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
@@ -20,26 +18,6 @@ import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
 
-  showSuspendUserDialog = () => {
-    const {comment, showSuspendUserDialog} = this.props;
-    return showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
-  showBanUserDialog = () => {
-    const {comment, showBanUserDialog} = this.props;
-    return showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
   viewUserDetail = () => {
     const {viewUserDetail, comment} = this.props;
     return viewUserDetail(comment.user.id);
@@ -63,7 +41,6 @@ class Comment extends React.Component {
       data,
       root,
       root: {settings},
-      currentUserId,
       currentAsset,
     } = this.props;
 
@@ -79,13 +56,13 @@ class Comment extends React.Component {
         <div className={styles.container}>
           <div className={styles.itemHeader}>
             <div className={styles.author}>
-              {
-                (
-                  <span className={styles.username} onClick={this.viewUserDetail}>
-                    {comment.user.username}
-                  </span>
-                )
-              }
+
+              <span
+                className={cn(styles.username, 'talk-admin-moderate-comment-username')}
+                onClick={this.viewUserDetail}>
+                {comment.user.username}
+              </span>
+
               <span className={styles.created}>
                 {timeago(comment.created_at)}
               </span>
@@ -94,19 +71,6 @@ class Comment extends React.Component {
                   ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
                   : null
               }
-              {currentUserId !== comment.user.id &&
-                <ActionsMenu icon="not_interested" className="talk-admin-moderate-comment-actions-menu">
-                  <ActionsMenuItem
-                    disabled={comment.user.state.status.suspension.status}
-                    onClick={this.showSuspendUserDialog}>
-                    Suspend User</ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={comment.user.state.status.banned.status}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
               <div className={styles.adminCommentInfoBar}>
                 <CommentLabels
                   comment={comment}
@@ -188,8 +152,6 @@ Comment.propTypes = {
   rejectComment: PropTypes.func.isRequired,
   className: PropTypes.string,
   currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -269,8 +269,6 @@ class Moderation extends Component {
             activeTab={activeTab}
             singleView={moderation.singleView}
             selectedCommentId={this.state.selectedCommentId}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             loadMore={this.loadMore}
@@ -315,8 +313,6 @@ Moderation.propTypes = {
   queueConfig: PropTypes.object.isRequired,
   handleCommentChange: PropTypes.func.isRequired,
   setSortOrder: PropTypes.func.isRequired,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   loadMore: PropTypes.func.isRequired,

client/coral-admin/src/routes/Moderation/components/ModerationQueue.js

@@ -148,8 +148,6 @@ class ModerationQueue extends React.Component {
             comment={comment}
             selected={true}
             viewUserDetail={viewUserDetail}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
@@ -192,8 +190,6 @@ class ModerationQueue extends React.Component {
                   comment={comment}
                   selected={comment.id === selectedCommentId}
                   viewUserDetail={viewUserDetail}
-                  showBanUserDialog={props.showBanUserDialog}
-                  showSuspendUserDialog={props.showSuspendUserDialog}
                   acceptComment={props.acceptComment}
                   rejectComment={props.rejectComment}
                   currentAsset={props.currentAsset}
@@ -215,8 +211,6 @@ class ModerationQueue extends React.Component {
 ModerationQueue.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   comments: PropTypes.array.isRequired,

client/coral-admin/src/routes/Moderation/containers/Moderation.js

@@ -12,9 +12,6 @@ import {isPremod, getModPath} from '../../../utils';
 
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {handleCommentChange} from '../graphql';
-
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {viewUserDetail} from '../../../actions/userDetail';
 import {
   toggleModal,
@@ -414,10 +411,8 @@ const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     toggleModal,
     singleView,
-    showBanUserDialog,
     hideShortcutsNote,
     toggleStorySearch,
-    showSuspendUserDialog,
     viewUserDetail,
     setSortOrder,
     storySearchChange,

client/coral-ui/components/Drawer.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './Drawer.css';
 
-const Drawer = ({children, onClose}) => {
+const Drawer = ({children, onClose, className = ''}) => {
   return (
-    <div className={styles.drawer}>
+    <div className={cn(styles.drawer, className)}>
       <div className={styles.closeButton} onClick={onClose}>×</div>
       <div className={styles.content}>
         {children}
@@ -15,7 +16,9 @@ const Drawer = ({children, onClose}) => {
 
 Drawer.propTypes = {
   active: PropTypes.bool,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 export default Drawer;

package.json

@@ -149,7 +149,7 @@
     "react-apollo": "^1.4.12",
     "react-dom": "^15.4.2",
     "react-input-autosize": "^1.1.4",
-    "react-mdl": "^1.7.2",
+    "react-mdl": "^1.11.0",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",
     "react-recaptcha": "^2.2.6",

test/e2e/page_objects/admin.js

@@ -65,9 +65,7 @@ module.exports = {
       selector: '.talk-admin-moderation-container',
       elements: {
         comment: '.talk-admin-moderate-comment',
-        commentActionMenu: '.talk-admin-moderate-comment-actions-menu',
-        actionItemSuspendUser: '.action-menu-item#suspendUser',
-        actionMenuButton: '.talk-admin-moderate-comment-actions-menu #actions-dropdown-0'
+        commentUsername: '.talk-admin-moderate-comment-username',
       }
     },
     stories: {
@@ -116,6 +114,14 @@ module.exports = {
         }
       }
     },
+    userDetailDrawer: {
+      selector: '.talk-admin-user-detail-drawer',
+      elements: {
+        'actionsMenu': '.talk-admin-user-detail-actions-button',
+        'actionItemSuspendUser': '.action-menu-item#suspendUser',
+        'actionMenuButton': '.talk-admin-user-detail-actions-menu #actions-dropdown-0',
+      }
+    },
     drawer: {
       selector: '.talk-admin-drawer-nav',
       commands: [{

test/e2e/specs/06_suspendUser.js

@@ -82,7 +82,7 @@ module.exports = {
   },
   'admin suspends user': (client) => {
     const adminPage = client.page.admin();
-    const moderate = adminPage.section.moderate;
+    const {moderate, userDetailDrawer} = adminPage.section;
     
     adminPage
       .navigate()
@@ -91,8 +91,11 @@ module.exports = {
 
     moderate
       .waitForElementVisible('@comment')
-      .waitForElementVisible('@commentActionMenu')
-      .waitForElementVisible('@actionMenuButton')
+      .waitForElementVisible('@commentUsername')
+      .click('@commentUsername');
+
+    userDetailDrawer
+      .waitForElementVisible('@actionsMenu')
       .click('@actionMenuButton')
       .waitForElementVisible('@actionItemSuspendUser')
       .click('@actionItemSuspendUser');

yarn.lock

@@ -7524,16 +7524,7 @@ react-mdl-selectfield@^0.2.0:
     react-dom "^15.3.1"
     react-mdl "^1.7.1"
 
-react-mdl@^1.7.1:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.10.3.tgz#f783e26a5eea4154a32129ab2562c09d5eeacf0d"
-  dependencies:
-    clamp "^1.0.1"
-    classnames "^2.2.3"
-    lodash.isequal "^4.4.0"
-    prop-types "^15.5.0"
-
-react-mdl@^1.7.2:
+react-mdl@^1.11.0, react-mdl@^1.7.1:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.11.0.tgz#7e07ee1009dd9b358b616dc400ff2ae1845a2e67"
   dependencies: