First pass adding labels

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

@@ -0,0 +1,2 @@
+.root {
+}

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

@@ -0,0 +1,39 @@
+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';
+
+function isUserFlagged(actions) {
+  return actions.some((action) => action.__typename === 'FlagAction' && action.user);
+}
+
+function hasSuspectedWords(actions) {
+  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'Matched suspect word filter');
+}
+
+function hasHistoryFlag(actions) {
+  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
+}
+
+const CommentLabels = ({className, status, actions, isReply}) => {
+  return (
+    <div className={cn(className, styles.root)}>
+      {isReply && <Label iconName="reply">reply</Label>}
+      {status === 'PREMOD' && <Label iconName="query_builder">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>}
+    </div>
+  );
+};
+
+CommentLabels.propTypes = {
+  className: PropTypes.string,
+  status: PropTypes.string,
+  actions: PropTypes.array,
+  isReply: PropTypes.bool,
+};
+
+export default CommentLabels;

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

@@ -0,0 +1,4 @@
+.flag {
+  background: #d03235;
+}
+

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './FlagLabel.css';
+import Label from './Label';
+import cn from 'classnames';
+
+const FlagLabel = ({iconName, children, className}) => {
+  return (
+    <Label iconName={iconName} className={cn(className, styles.flag)}>
+      {children}
+    </Label>
+  );
+};
+
+FlagLabel.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  iconName: PropTypes.string,
+};
+
+export default FlagLabel;

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

@@ -0,0 +1,26 @@
+.root {
+  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: #063B9A;
+  min-width: 80px;
+  text-align: center;
+}
+
+.icon {
+  font-size: 14px;
+  vertical-align: text-top;
+  margin: 0;
+  margin-right: 4px;
+}
+
+.isFlag {
+  background: #d03235;
+}
+

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Label.css';
+import {Icon} from 'coral-ui';
+import cn from 'classnames';
+
+const Label = ({iconName, children, className, isFlag}) => {
+  return (
+    <span className={cn(className, styles.root, {[styles.isFlag]: isFlag})}>
+      <Icon name={iconName} className={styles.icon} /> {children}
+    </span>
+  );
+};
+
+Label.propTypes = {
+  className: PropTypes.string,
+  isFlag: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  iconName: PropTypes.string,
+};
+
+export default Label;

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

@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import {Link} from 'react-router';
 
 import {Icon} from 'coral-ui';
-import ReplyBadge from 'coral-admin/src/components/ReplyBadge';
 import FlagBox from 'coral-admin/src/components/FlagBox';
 import styles from './styles.css';
-import CommentType from 'coral-admin/src/components/CommentType';
+import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
 import {getActionSummary} from 'coral-framework/utils';
@@ -16,7 +15,6 @@ import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 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 t, {timeago} from 'coral-framework/services/i18n';
 
@@ -66,7 +64,6 @@ class Comment extends React.Component {
 
     const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
     const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
-    const commentType = getCommentType(comment);
 
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
 
@@ -109,8 +106,11 @@ class Comment extends React.Component {
                 </ActionsMenu>
               }
               <div className={styles.adminCommentInfoBar}>
-                {comment.hasParent && <ReplyBadge/>}
-                <CommentType type={commentType} className={styles.commentType}/>
+                <CommentLabels
+                  status={comment.status}
+                  actions={comment.actions}
+                  isReply={!!comment.hasParent}
+                />
                 <Slot
                   fill="adminCommentInfoBar"
                   data={data}