diff --git a/client/coral-admin/src/components/ActionButton.js b/client/coral-admin/src/components/ActionButton.js index cfd7eb2da..42af5db24 100644 --- a/client/coral-admin/src/components/ActionButton.js +++ b/client/coral-admin/src/components/ActionButton.js @@ -17,11 +17,11 @@ const ActionButton = ({type = '', active, ...props}) => { return ( + >{props.minimal ? '' : t(`modqueue.${text}`)} ); }; diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css index 4d4f37c9a..99927e7ad 100644 --- a/client/coral-admin/src/components/ModerationList.css +++ b/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; diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 152121a63..06f7c9ef3 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -254,7 +254,13 @@ class ModerationContainer extends Component { {moderation.userDetailId && ( + hideUserDetail={hideUserDetail} + bannedWords={settings.wordlist.banned} + suspectWords={settings.wordlist.suspect} + showBanUserDialog={props.showBanUserDialog} + showSuspendUserDialog={props.showSuspendUserDialog} + acceptComment={props.acceptComment} + rejectComment={props.rejectComment} /> )} ); diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css index e37971ada..7c84f62fa 100644 --- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css +++ b/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; } diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js index d9b85a060..cabd8bf9f 100644 --- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js +++ b/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 {

{`${(rejectedPercent).toFixed(1)}%`}

+
+ { + comments.map((comment, i) => { + const status = comment.action_summaries ? 'FLAGGED' : comment.status; + return {}} + actions={actionsMap[status]} + showBanUserDialog={showBanUserDialog} + showSuspendUserDialog={showSuspendUserDialog} + acceptComment={acceptComment} + rejectComment={rejectComment} + currentAsset={null} + currentUserId={this.props.id} + minimal={true} />; + }) + } +
); } diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js index bf6b050a1..fe41f4d34 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js +++ b/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 ( { return (
×
- {children} +
+ {children} +
); }; diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql index 1abb894b8..15278f97e 100644 --- a/graph/typeDefs.graphql +++ b/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!]