Adding functionality and design functionality

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

@@ -76,7 +76,7 @@ ActionsMenu.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   buttonClassNames: PropTypes.string,
 };
 

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

@@ -10,6 +10,9 @@ import {
   getReliability,
   isSuspended,
   isBanned,
+  isUsernameRejected,
+  isUsernameChanged,
+  getActiveStatuses,
 } from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
@@ -26,6 +29,7 @@ import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import UserInfoTooltip from './UserInfoTooltip';
 import t from 'coral-framework/services/i18n';
+import flatten from 'lodash/flatten';
 
 class UserDetail extends React.Component {
   rejectThenReload = async info => {
@@ -84,18 +88,43 @@ class UserDetail extends React.Component {
     );
   }
 
-  getActionMenuLabel() {
-    const { root: { user } } = this.props;
+  getActionMenuLabel(user) {
+    const activeStatuses = getActiveStatuses(user);
+    const count = activeStatuses.length;
 
-    if (isBanned(user)) {
-      return 'Banned';
-    } else if (isSuspended(user)) {
-      return 'Suspended';
+    if (count > 1) {
+      return `Status(${count})`;
+    } else {
+      const activeStatus = flatten(activeStatuses)[0];
+
+      switch (activeStatus) {
+        case 'suspended':
+          return <span>Suspended</span>;
+        case 'banned':
+          return <span>Banned</span>;
+        case 'usernameRejected':
+          return (
+            <span>
+              Username <Icon name="cancel" />
+            </span>
+          );
+        case 'usernameChanged':
+          return (
+            <span>
+              Username <Icon name="access_time" />
+            </span>
+          );
+        default:
+          return activeStatus;
+      }
     }
-
-    return '';
   }
 
+  goToReportedUsernames = () => {
+    const { router } = this.props;
+    router.push('/admin/community/flagged');
+  };
+
   renderLoaded() {
     const {
       root,
@@ -122,8 +151,8 @@ class UserDetail extends React.Component {
 
     const banned = isBanned(user);
     const suspended = isSuspended(user);
-
-    console.log(user);
+    const usernameRejected = isUsernameRejected(user);
+    const usernameChanged = isUsernameChanged(user);
 
     const slotPassthrough = {
       root,
@@ -156,12 +185,8 @@ class UserDetail extends React.Component {
                 },
                 'talk-admin-user-detail-actions-button'
               )}
-              label={this.getActionMenuLabel()}
+              label={this.getActionMenuLabel(user)}
             >
-              <ActionsMenuItem onClick={() => rejectUsername({ id: user.id })}>
-                Reject Username
-              </ActionsMenuItem>
-
               {suspended ? (
                 <ActionsMenuItem onClick={() => unsuspendUser({ id: user.id })}>
                   {t('user_detail.remove_suspension')}
@@ -174,6 +199,7 @@ class UserDetail extends React.Component {
                   {t('user_detail.suspend')}
                 </ActionsMenuItem>
               )}
+
               {banned ? (
                 <ActionsMenuItem onClick={() => unbanUser({ id: user.id })}>
                   {t('user_detail.remove_ban')}
@@ -186,6 +212,24 @@ class UserDetail extends React.Component {
                   {t('user_detail.ban')}
                 </ActionsMenuItem>
               )}
+
+              {usernameChanged && (
+                <ActionsMenuItem onClick={this.goToReportedUsernames}>
+                  Username needs approval
+                </ActionsMenuItem>
+              )}
+
+              {usernameRejected && !usernameChanged ? (
+                <ActionsMenuItem disabled={me.id === user.id}>
+                  Username Rejected
+                </ActionsMenuItem>
+              ) : (
+                <ActionsMenuItem
+                  onClick={() => rejectUsername({ id: user.id })}
+                >
+                  Reject Username
+                </ActionsMenuItem>
+              )}
             </ActionsMenu>
           )}
 
@@ -361,6 +405,7 @@ class UserDetail extends React.Component {
 }
 
 UserDetail.propTypes = {
+  router: PropTypes.object.isRequired,
   userId: PropTypes.string.isRequired,
   hideUserDetail: PropTypes.func.isRequired,
   root: PropTypes.object.isRequired,

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

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import UserDetail from '../components/UserDetail';
 import withQuery from 'coral-framework/hocs/withQuery';
+import { withRouter } from 'react-router';
 import {
   getDefinitionName,
   getSlotFragmentSpreads,
@@ -21,12 +22,12 @@ import {
   withSetCommentStatus,
   withUnbanUser,
   withUnsuspendUser,
+  withRejectUsername,
 } from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
 import { showBanUserDialog } from 'actions/banUserDialog';
 import { showSuspendUserDialog } from 'actions/suspendUserDialog';
-import { withRejectUsername } from '../../../coral-framework/graphql/mutations';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
@@ -285,5 +286,6 @@ export default compose(
   withSetCommentStatus,
   withUnbanUser,
   withUnsuspendUser,
-  withRejectUsername
+  withRejectUsername,
+  withRouter
 )(UserDetailContainer);

client/coral-framework/utils/user.js

@@ -1,4 +1,6 @@
 import get from 'lodash/get';
+import mapValues from 'lodash/mapValues';
+import toPairs from 'lodash/toPairs';
 
 /**
  * getReliability
@@ -40,5 +42,31 @@ export const isBanned = user => {
  */
 
 export const isUsernameRejected = user => {
-  return get(user, 'state.status.username.status');
+  return get(user, 'state.status.username.status') === 'REJECTED';
+};
+
+/**
+ * isUsernameChanged
+ * retrieves boolean based on the username status
+ */
+
+export const isUsernameChanged = user => {
+  return get(user, 'state.status.username.status') === 'CHANGED';
+};
+
+/**
+ * getActiveStatuses
+ * returns an array of active status(es)
+ * i.e if suspension is active, it returns suspension
+ */
+
+export const getActiveStatuses = user => {
+  const statusMap = {
+    suspended: isSuspended,
+    banned: isBanned,
+    usernameRejected: isUsernameRejected,
+    usernameChanged: isUsernameChanged,
+  };
+
+  return toPairs(mapValues(statusMap, fn => fn(user))).filter(x => x[1]);
 };