Added core labels

client/coral-admin/src/components/CommentLabels.css

@@ -1,2 +1,13 @@
 .root {
+  > *:not(:last-child) {
+    margin-right: 3px;
+  }
+}
+
+.replyLabel {
+  background-color: #3D73D5;
+}
+
+.premodLabel {
+  background-color: #063B9A;
 }

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './CommentLabels.css';
 import Label from './Label';
 import FlagLabel from './FlagLabel';
 import cn from 'classnames';
+import styles from './CommentLabels.css';
 
 function isUserFlagged(actions) {
   return actions.some((action) => action.__typename === 'FlagAction' && action.user);
@@ -17,11 +17,11 @@ function hasHistoryFlag(actions) {
   return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
 }
 
-const CommentLabels = ({className, status, actions, isReply}) => {
+const CommentLabels = ({comment: {className, status, actions, hasParent}}) => {
   return (
     <div className={cn(className, styles.root)}>
-      {isReply && <Label iconName="reply">reply</Label>}
-      {status === 'PREMOD' && <Label iconName="query_builder">Pre-Mod</Label>}
+      {hasParent && <Label iconName="reply" className={styles.replyLabel}>reply</Label>}
+      {status === 'PREMOD' && <Label iconName="query_builder" className={styles.premodLabel}>Pre-Mod</Label>}
       {isUserFlagged(actions) && <FlagLabel iconName="person">User</FlagLabel>}
       {hasSuspectedWords(actions) && <FlagLabel iconName="sms_failed">Suspect</FlagLabel>}
       {hasHistoryFlag(actions) && <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>}
@@ -30,10 +30,12 @@ const CommentLabels = ({className, status, actions, isReply}) => {
 };
 
 CommentLabels.propTypes = {
-  className: PropTypes.string,
-  status: PropTypes.string,
-  actions: PropTypes.array,
-  isReply: PropTypes.bool,
+  comment: PropTypes.shape({
+    className: PropTypes.string,
+    status: PropTypes.string,
+    actions: PropTypes.array,
+    hasParent: PropTypes.bool,
+  }),
 };
 
 export default CommentLabels;

client/coral-admin/src/components/CommentType.css

@@ -1,30 +0,0 @@
-.commentType {
-  display: inline-block;
-  color: white;
-  background: grey;
-  box-sizing: border-box;
-  padding: 2px 5px;
-  font-size: 12px;
-  height: 24px;
-  letter-spacing: 0.4px;
-  line-height: 22px;
-  
-  > i {
-    font-size: 14px;
-    vertical-align: text-top;
-    margin: 0;
-    margin-right: 4px;
-  }
-
-  &.premod {
-    background: #063B9A;
-  }
-
-  &.flagged {
-    background: #d03235;
-  }
-
-  &.no-type {
-    display: none;
-  }
-}

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './CommentType.css';
-import {Icon} from 'coral-ui';
-import cn from 'classnames';
-
-const CommentType = (props) => {
-  const typeData = getTypeData(props.type);
-
-  return (
-    <span className={cn(styles.commentType, styles[typeData.className], props.className)}>
-      <Icon name={typeData.icon}/>{typeData.text}
-    </span>
-  );
-};
-
-const getTypeData = (type) => {
-  switch (type) {
-  case 'premod':
-    return {icon: 'query_builder', text: 'Pre-Mod', className: 'premod'};
-  case 'flagged':
-    return {icon: 'flag', text: 'Flagged', className: 'flagged'};
-  default:
-    return {icon: 'flag', className: 'no-type'};
-  }
-};
-
-CommentType.propTypes = {
-  type: PropTypes.string.isRequired
-};
-
-export default CommentType;

client/coral-admin/src/components/Label.css

@@ -8,7 +8,6 @@
   height: 24px;
   letter-spacing: 0.4px;
   line-height: 22px;
-  background: #063B9A;
   min-width: 80px;
   text-align: center;
 }
@@ -20,7 +19,4 @@
   margin-right: 4px;
 }
 
-.isFlag {
-  background: #d03235;
-}
 

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import {Badge} from 'coral-ui';
-import t from 'coral-framework/services/i18n';
-
-const ReplyBadge = () => (
-  <Badge icon="reply">
-    {t('modqueue.reply')}
-  </Badge>
-);
-
-export default ReplyBadge;

client/coral-admin/src/components/UserDetailComment.css

@@ -55,7 +55,7 @@
   position: relative;
 }
 
-.badgeBar {
+.labels {
   position: absolute;
   right: 0px;
 }

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

@@ -4,16 +4,14 @@ import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
 import FlagBox from './FlagBox';
-import ReplyBadge from './ReplyBadge';
 import styles from './UserDetailComment.css';
-import CommentType from './CommentType';
 import {getActionSummary} from 'coral-framework/utils';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
-import {getCommentType} from 'coral-admin/src/utils/comment';
 import CommentAnimatedEdit from './CommentAnimatedEdit';
+import CommentLabels from '../containers/CommentLabels';
 
 import t, {timeago} from 'coral-framework/services/i18n';
 
@@ -35,7 +33,6 @@ class UserDetailComment extends React.Component {
 
     const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
     const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
-    const commentType = getCommentType(comment);
 
     return (
       <li
@@ -59,9 +56,8 @@ class UserDetailComment extends React.Component {
                 : null
             }
 
-            <div className={styles.badgeBar}>
-              {comment.hasParent && <ReplyBadge/>}
-              <CommentType type={commentType}/>
+            <div className={styles.labels}>
+              <CommentLabels comment={comment} />
             </div>
           </div>
           <div className={styles.story}>

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

@@ -0,0 +1,21 @@
+import {gql} from 'react-apollo';
+import CommentLabels from '../components/CommentLabels';
+import withFragments from 'coral-framework/hocs/withFragments';
+
+export default withFragments({
+  comment: gql`
+    fragment CoralAdmin_CommentLabels_comment on Comment {
+      hasParent
+      status
+      actions {
+        __typename
+        ... on FlagAction {
+          reason
+        }
+        user {
+          id
+        }
+      }
+    }
+  `
+})(CommentLabels);

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

@@ -1,6 +1,8 @@
 import {gql} from 'react-apollo';
 import UserDetailComment from '../components/UserDetailComment';
 import withFragments from 'coral-framework/hocs/withFragments';
+import {getDefinitionName} from 'coral-framework/utils';
+import CommentLabels from './CommentLabels';
 
 export default withFragments({
   comment: gql`
@@ -35,6 +37,8 @@ export default withFragments({
       editing {
         edited
       }
+      ...${getDefinitionName(CommentLabels.fragments.comment)}
     }
+    ${CommentLabels.fragments.comment}
   `
 })(UserDetailComment);

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -107,9 +107,7 @@ class Comment extends React.Component {
               }
               <div className={styles.adminCommentInfoBar}>
                 <CommentLabels
-                  status={comment.status}
-                  actions={comment.actions}
-                  isReply={!!comment.hasParent}
+                  comment={comment}
                 />
                 <Slot
                   fill="adminCommentInfoBar"

client/coral-admin/src/routes/Moderation/containers/Comment.js

@@ -1,7 +1,8 @@
 import {gql} from 'react-apollo';
 import Comment from '../components/Comment';
+import CommentLabels from '../../../containers/CommentLabels';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {getSlotFragmentSpreads, getDefinitionName} from 'coral-framework/utils';
 
 const slots = [
   'adminCommentInfoBar',
@@ -58,6 +59,8 @@ export default withFragments({
       }
       hasParent
       ${getSlotFragmentSpreads(slots, 'comment')}
+      ...${getDefinitionName(CommentLabels.fragments.comment)}
     }
+    ${CommentLabels.fragments.comment}
   `
 })(Comment);

client/coral-admin/src/utils/comment.js

@@ -1,9 +0,0 @@
-export function getCommentType(comment) {
-  let commentType = '';
-  if (comment.status === 'PREMOD') {
-    commentType = 'premod';
-  } else if (comment.actions && comment.actions.some((a) => a.__typename === 'FlagAction')) {
-    commentType = 'flagged';
-  }
-  return commentType;
-}

client/coral-ui/components/Badge.css

@@ -1,20 +0,0 @@
-.badge {
-  display: inline-block;
-  color: white;
-  background: grey;
-  box-sizing: border-box;
-  padding: 2px 5px;
-  font-size: 12px;
-  height: 24px;
-  letter-spacing: 0.4px;
-  line-height: 22px;
-  background-color: #3D73D5;
-  margin-right: 4px;
-}
-
-.icon {
-  font-size: 14px;
-  vertical-align: text-top;
-  margin: 0;
-  margin-right: 4px;
-}

client/coral-ui/components/Badge.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import styles from './Badge.css';
-import Icon from './Icon';
-import cn from 'classnames';
-
-const Badge = ({className, children, icon, props}) => (
-  <span className={cn(styles.badge, className)} {...props}>
-    {icon && <Icon name={icon} className={styles.icon} />}
-    {children}
-  </span>
-);
-
-export default Badge;

client/coral-ui/index.js

@@ -26,4 +26,3 @@ 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';
-export {default as Badge} from './components/Badge';