Moving ActionsMenu

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/UserDetail.js

@@ -13,30 +13,10 @@ import {getReliability} from 'coral-framework/utils/user';
 import ApproveButton from './ApproveButton';
 import RejectButton from './RejectButton';
 import {getErrorMessages} from 'coral-framework/utils';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-    toggleSelectAll: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      refetch: PropTypes.func.isRequired,
-    }),
-    activeTab: PropTypes.string.isRequired,
-    selectedCommentIds: PropTypes.array.isRequired,
-    viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired,
-    notify: PropTypes.func.isRequired
-  }
+class UserDetail extends React.Component {
 
   rejectThenReload = async (info) => {
     try {
@@ -90,6 +70,16 @@ export default class UserDetail extends React.Component {
     this.props.changeStatus('rejected');
   }
 
+  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,
+  });
+
   renderLoading() {
     return (
       <ClickOutside onClickOutside={this.props.hideUserDetail}>
@@ -131,6 +121,21 @@ export default class UserDetail extends React.Component {
         <Drawer onClose={hideUserDetail}>
           <h3>{user.username}</h3>
 
+          {user.id !== user.id &&
+            <ActionsMenu icon="not_interested">
+              <ActionsMenuItem
+                disabled={user.status === 'BANNED'}
+                onClick={this.showSuspenUserDialog}>
+                Suspend User
+              </ActionsMenuItem>
+              <ActionsMenuItem
+                disabled={user.status === 'BANNED'}
+                onClick={this.showBanUserDialog}>
+                Ban User
+              </ActionsMenuItem>
+            </ActionsMenu>
+          }
+
           <div>
             <ul className={styles.userDetailList}>
               <li>
@@ -244,3 +249,29 @@ export default class UserDetail extends React.Component {
     return this.renderLoaded();
   }
 }
+
+UserDetail.propTypes = {
+  user: PropTypes.object.isRequired,
+  hideUserDetail: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  changeStatus: PropTypes.func.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+  bulkAccept: PropTypes.func.isRequired,
+  bulkReject: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    refetch: PropTypes.func.isRequired,
+  }),
+  activeTab: PropTypes.string.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  notify: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+};
+
+export default UserDetail;

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

@@ -17,6 +17,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_Moderation_CommentConnection on CommentConnection {
@@ -181,6 +183,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,8 +4,6 @@ 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';
 
@@ -19,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,
   });
@@ -40,7 +30,6 @@ class User extends React.Component {
       user,
       viewUserDetail,
       selected,
-      me,
       className,
     } = this.props;
 
@@ -55,20 +44,6 @@ class User extends React.Component {
                 className={styles.button}>
                 {user.username}
               </button>
-              {me.id !== user.id &&
-                <ActionsMenu icon="not_interested">
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showSuspenUserDialog}>
-                    Suspend User
-                  </ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
             </div>
           </div>
           <div className={cn('talk-admin-community-flagged-user-body', styles.body)}>
@@ -136,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

@@ -7,8 +7,6 @@ import {Spinner} from 'coral-ui';
 import PropTypes from 'prop-types';
 
 import {withSetUserStatus} 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';
@@ -63,8 +61,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}
@@ -79,8 +75,6 @@ class FlaggedAccountsContainer extends Component {
 }
 
 FlaggedAccountsContainer.propTypes = {
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
   setUserStatus: PropTypes.func,
@@ -104,8 +98,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;
 
@@ -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.status === 'BANNED'}
-                    onClick={this.showSuspendUserDialog}>
-                    Suspend User</ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={comment.user.status === 'BANNED'}
-                    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,