diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js index 6ce94a60f..d8dbb03c1 100644 --- a/client/coral-admin/src/components/UserDetail.js +++ b/client/coral-admin/src/components/UserDetail.js @@ -138,7 +138,7 @@ class UserDetail extends React.Component { return ( - +

{user.username}

diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js index 362e7189d..faeb694f6 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.js +++ b/client/coral-admin/src/routes/Moderation/components/Comment.js @@ -56,13 +56,13 @@ class Comment extends React.Component {
- { - ( - - {comment.user.username} - - ) - } + + + {comment.user.username} + + {timeago(comment.created_at)} diff --git a/client/coral-ui/components/Drawer.js b/client/coral-ui/components/Drawer.js index d50237bfb..bada98a1f 100644 --- a/client/coral-ui/components/Drawer.js +++ b/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 ( -
+
×
{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; diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js index aa3b58ab5..173fff747 100644 --- a/test/e2e/page_objects/admin.js +++ b/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: [{ diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js index 20f38c2c2..a3da3c8ef 100644 --- a/test/e2e/specs/06_suspendUser.js +++ b/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');