merge master

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

@@ -18,3 +18,6 @@ export const hideShortcutsNote = () => {
 
   return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
+
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});

client/coral-admin/src/constants/moderation.js

@@ -3,3 +3,5 @@ export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -10,7 +10,15 @@ import {banUser, setCommentStatus} from '../../graphql/mutations';
 
 import {fetchSettings} from 'actions/settings';
 import {updateAssets} from 'actions/assets';
-import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog, hideShortcutsNote} from 'actions/moderation';
+import {
+  toggleModal,
+  singleView,
+  showBanUserDialog,
+  hideBanUserDialog,
+  hideShortcutsNote,
+  viewUserDetail,
+  hideUserDetail
+} from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
 import BanUserDialog from '../../components/BanUserDialog';
@@ -19,6 +27,7 @@ import ModerationMenu from './components/ModerationMenu';
 import ModerationHeader from './components/ModerationHeader';
 import NotFoundAsset from './components/NotFoundAsset';
 import ModerationKeysModal from '../../components/ModerationKeysModal';
+import UserDetail from './UserDetail';
 
 class ModerationContainer extends Component {
   state = {
@@ -111,7 +120,7 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, onClose, ...props} = this.props;
+    const {data, moderation, settings, assets, onClose, viewUserDetail, hideUserDetail, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
@@ -181,6 +190,8 @@ class ModerationContainer extends Component {
           assetId={providedAssetId}
           sort={this.state.sort}
           commentCount={activeTabCount}
+          viewUserDetail={viewUserDetail}
+          hideUserDetail={hideUserDetail}
         />
         <BanUserDialog
           open={moderation.banDialog}
@@ -192,11 +203,16 @@ class ModerationContainer extends Component {
           showRejectedNote={moderation.showRejectedNote}
           rejectComment={props.rejectComment}
         />
-      <ModerationKeysModal
+        <ModerationKeysModal
           hideShortcutsNote={props.hideShortcutsNote}
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
+        {moderation.userDetailId && (
+          <UserDetail
+            id={moderation.userDetailId}
+            hideUserDetail={hideUserDetail} />
+        )}
       </div>
     );
   }
@@ -214,6 +230,8 @@ const mapDispatchToProps = (dispatch) => ({
   singleView: () => dispatch(singleView()),
   updateAssets: (assets) => dispatch(updateAssets(assets)),
   fetchSettings: () => dispatch(fetchSettings()),
+  viewUserDetail: (id) => dispatch(viewUserDetail(id)),
+  hideUserDetail: () => dispatch(hideUserDetail()),
   showBanUserDialog: (user, commentId, commentStatus, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, commentStatus, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
   hideShortcutsNote: () => dispatch(hideShortcutsNote()),

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

@@ -12,6 +12,7 @@ const lang = new I18n(translations);
 class ModerationQueue extends React.Component {
 
   static propTypes = {
+    viewUserDetail: PropTypes.func.isRequired,
     bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
     suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
     currentAsset: PropTypes.object,
@@ -33,7 +34,17 @@ class ModerationQueue extends React.Component {
   }
 
   render () {
-    const {comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props} = this.props;
+    const {
+      comments,
+      selectedIndex,
+      commentCount,
+      singleView,
+      loadMore,
+      activeTab,
+      sort,
+      viewUserDetail,
+      ...props
+    } = this.props;
 
     return (
       <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
@@ -49,6 +60,7 @@ class ModerationQueue extends React.Component {
                 selected={i === selectedIndex}
                 suspectWords={props.suspectWords}
                 bannedWords={props.bannedWords}
+                viewUserDetail={viewUserDetail}
                 actions={actionsMap[status]}
                 showBanUserDialog={props.showBanUserDialog}
                 acceptComment={props.acceptComment}

client/coral-admin/src/containers/ModerationQueue/UserDetail.css

@@ -0,0 +1,42 @@
+.copyButton {
+  float: right;
+  top: -10px;
+}
+
+.memberSince {
+  clear: both;
+}
+
+.small {
+  color: #aaa;
+}
+
+.stats {
+  display: flex;
+
+  .stat {
+    margin: 0 4px 12px;
+  }
+
+  .stat:last-child {
+    margin-right: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .stat p:first-child {
+    font-weight: bold;
+  }
+}
+
+.profileEmail {
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  font-size: 16px;
+  position: absolute;
+  width: 100%;
+  outline: none;
+}

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

@@ -0,0 +1,74 @@
+import React, {PropTypes} from 'react';
+import {Button, Drawer} from 'coral-ui';
+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';
+
+class UserDetail extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    hideUserDetail: PropTypes.func.isRequired
+  }
+
+  copyPermalink = () => {
+    this.profile.select();
+    try {
+      document.execCommand('copy');
+    } catch (e) {
+
+      /* nothing */
+    }
+  }
+
+  render () {
+    const {data, hideUserDetail} = this.props;
+
+    if (!('user' in data)) {
+      return null;
+    }
+
+    const {user, totalComments, rejectedComments} = data;
+    const localProfile = user.profiles.find((p) => p.provider === 'local');
+    let profile;
+    if (localProfile) {
+      profile = localProfile.id;
+    }
+
+    let rejectedPercent = rejectedComments / totalComments;
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
+
+      // if totalComments is 0, you're dividing by zero, which is naughty
+      rejectedPercent = 0;
+    }
+
+    return (
+      <Drawer handleClickOutside={hideUserDetail}>
+        <h3>{user.username}</h3>
+        <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
+        {profile && <input className={styles.profileEmail} type="text" ref={(ref) => this.profile = ref} value={profile} />}
+        <Slot fill="userProfile" user={user} />
+        <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
+        <hr/>
+        <p>
+          <strong>Account summary</strong>
+          <br/><small className={styles.small}>Data represents the last six months of activity</small>
+        </p>
+        <div className={styles.stats}>
+          <div className={styles.stat}>
+            <p>Total Comments</p>
+            <p>{totalComments}</p>
+          </div>
+          <div className={styles.stat}>
+            <p>Reject Rate</p>
+            <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
+          </div>
+        </div>
+      </Drawer>
+    );
+  }
+}
+
+export default compose(
+  getUserDetail
+)(UserDetail);

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -22,6 +22,7 @@ const lang = new I18n(translations);
 const Comment = ({
   actions = [],
   comment,
+  viewUserDetail,
   suspectWords,
   bannedWords,
   ...props
@@ -56,7 +57,7 @@ const Comment = ({
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span>
+            <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
               {comment.user.name}
             </span>
             <span className={styles.created}>
@@ -154,6 +155,7 @@ const Comment = ({
 };
 
 Comment.propTypes = {
+  viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -165,8 +167,9 @@ Comment.propTypes = {
     actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,
     user: PropTypes.shape({
+      id: PropTypes.string,
       status: PropTypes.string
-    }),
+    }).isRequired,
     asset: PropTypes.shape({
       title: PropTypes.string,
       url: PropTypes.string,

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -424,6 +424,17 @@ span {
   top: 7px;
 }
 
+.username {
+  color: blue;
+  text-decoration: underline;
+  padding: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 0, 0, .1);
+  }
+}
+
 .external {
   font-size: .7em;
   text-decoration: none;

client/coral-admin/src/graphql/queries/index.js

@@ -4,6 +4,7 @@ import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
 import MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.graphql';
 import METRICS from './metricsQuery.graphql';
+import USER_DETAIL from './userDetail.graphql';
 import GET_QUEUE_COUNTS from './getQueueCounts.graphql';
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
@@ -95,6 +96,14 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
   });
 };
 
+export const getUserDetail = graphql(USER_DETAIL, {
+  options: ({id}) => {
+    return {
+      variables: {author_id: id}
+    };
+  }
+});
+
 export const getQueueCounts = graphql(GET_QUEUE_COUNTS, {
   options: ({params: {id = null}}) => {
     return {

client/coral-admin/src/graphql/queries/userDetail.graphql

@@ -0,0 +1,13 @@
+query UserDetail ($author_id: ID!) {
+  user(id: $author_id) {
+    id
+    username
+    created_at
+    profiles {
+      id
+      provider
+    }
+  }
+  totalComments: commentCount(query: {author_id: $author_id})
+  rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
+}

client/coral-admin/src/reducers/moderation.js

@@ -7,6 +7,7 @@ const initialState = Map({
   user: Map({}),
   commentId: null,
   commentStatus: null,
+  userDetailId: null,
   banDialog: false,
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show'
 });
@@ -38,6 +39,10 @@ export default function moderation (state = initialState, action) {
   case actions.HIDE_SHORTCUTS_NOTE:
     return state
       .set('shortcutsNoteVisible', 'hide');
+  case actions.VIEW_USER_DETAIL:
+    return state.set('userDetailId', action.userId);
+  case actions.HIDE_USER_DETAIL:
+    return state.set('userDetailId', null);
   default :
     return state;
   }

client/coral-embed-stream/public/samplearticle.html

@@ -1,16 +0,0 @@
-<html>
-  <head>
-  </head>
-  <body>
-  <div style="margin-left:auto; margin-right:auto; width:500px">
-    <h1>Lorem ipsum</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis sollicitudin eros a ornare. Curabitur dignissim vestibulum massa non rhoncus. Cras laoreet ante vel nunc hendrerit, ac imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Pellentesque interdum nec elit sed tincidunt. Donec volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non enim nec neque congue faucibus porttitor sit amet dui.</p>
-<p>Nunc pharetra orci id diam feugiat, vitae rutrum magna efficitur. Morbi porttitor blandit lorem, et facilisis tellus luctus at. Morbi tincidunt eget nisl id placerat. Nullam consectetur quam vel mauris lacinia, non consectetur est faucibus. Duis cursus auctor nulla nec sagittis. Aenean sem erat, ultrices a hendrerit consectetur, accumsan non lorem. Integer ac neque sed magna sodales vulputate at quis neque. Praesent eget ornare lacus. Donec ultricies, dolor eget commodo faucibus, arcu velit ullamcorper tellus, in cursus tellus elit sed urna. Suspendisse in consequat magna. Duis vel ullamcorper tortor, vel cursus libero. Proin et nisi luctus ligula faucibus luctus. Morbi pulvinar, justo ac feugiat elementum, libero tellus congue justo, pharetra ultrices felis felis id leo. Integer mattis quam tempus libero porta, ac pretium ligula elementum.</p>
-<div id='coralStreamEmbed'></div>
-<script type='text/javascript' src='/client/js/lib/pym.v1.min.js'></script>
-<script>
-var pymParent = new pym.Parent('coralStreamEmbed', 'index.html', {title: 'comments'});
-pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
-</div>
-  </body>
-</html>

client/coral-ui/components/Drawer.css

@@ -0,0 +1,33 @@
+.drawer {
+  max-width: 700px;
+  min-width: 400px;
+  padding: 20px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  transition: transform 500ms ease-in-out;
+  box-shadow: -3px 0px 4px 0px rgba(0,0,0,0.15);
+  z-index: 10000;
+}
+
+.closeButton {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  left: -40px;
+  background-color: white;
+  border-radius: 4px 0 0 4px;
+  box-sizing: border-box;
+  font-size: 32px;
+  top: 60px;
+  box-shadow: -1px 3px 4px 0px rgba(0,0,0,0.15);
+  text-align: center;
+  padding-top: 10px;
+  cursor: pointer;
+
+  &:hover {
+    color: #ccc;
+  }
+}

client/coral-ui/components/Drawer.js

@@ -0,0 +1,19 @@
+import React, {PropTypes} from 'react';
+import styles from './Drawer.css';
+import onClickOutside from 'react-onclickoutside';
+
+const Drawer = ({children, handleClickOutside}) => {
+  return (
+    <div className={styles.drawer}>
+      <div className={styles.closeButton} onClick={handleClickOutside}>×</div>
+      {children}
+    </div>
+  );
+};
+
+Drawer.propTypes = {
+  active: PropTypes.bool,
+  handleClickOutside: PropTypes.func.isRequired
+};
+
+export default onClickOutside(Drawer);

client/coral-ui/index.js

@@ -23,3 +23,4 @@ export {default as Select} from './components/Select';
 export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
 export {default as TextArea} from './components/TextArea';
+export {default as Drawer} from './components/Drawer';