Adding Reply Badge

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

@@ -15,6 +15,7 @@ import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighli
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import {getCommentType} from 'coral-admin/src/utils/comment';
+import ReplyBadge from './ReplyBadge';
 
 import t, {timeago} from 'coral-framework/services/i18n';
 
@@ -69,7 +70,7 @@ class Comment extends React.Component {
     let selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
 
     const queryData = {root, comment, asset: comment.asset};
-    console.log(comment);
+
     return (
       <li
         tabIndex={0}
@@ -107,6 +108,7 @@ class Comment extends React.Component {
                 </ActionsMenu>
               }
               <div className={styles.adminCommentInfoBar}>
+                <ReplyBadge hasParent={comment.hasParent} />
                 <CommentType type={commentType} className={styles.commentType}/>
                 <Slot
                   fill="adminCommentInfoBar"

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

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

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

@@ -37,6 +37,7 @@ export default withFragments({
         count
         ... on FlagActionSummary {
           reason
+          __typename
         }
       }
       actions {
@@ -48,7 +49,9 @@ export default withFragments({
             id
             username
           }
+          __typename
         }
+        __typename
       }
       editing {
         edited

client/coral-ui/components/Badge.css

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

client/coral-ui/components/Badge.js

@@ -0,0 +1,13 @@
+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,3 +26,4 @@ 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';

locales/en.yml

@@ -281,6 +281,7 @@ en:
     prev_comment: "Go to the previous comment"
     reject: "Reject"
     rejected: "Rejected"
+    reply: "Reply"
     select_stream: "Select Stream"
     shift_key: "⇧"
     shortcuts: "Shortcuts"

locales/es.yml

@@ -272,6 +272,7 @@ es:
     prev_comment: "Ir al comentario anterior"
     reject: "Rechazar"
     rejected: "rechazado"
+    reply: "Respuesta"
     select_stream: "Seleccionar hilo de comentarios"
     shift_key: ⇧
     shortcuts: Atajos