Deleted Comment display in Queues

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import styles from './CommentDeletedTombstone.css';
+import t from 'coral-framework/services/i18n';
 
 const CommentDeletedTombstone = () => (
-  <div className={styles.tombstone}>The comment was deleted.</div>
+  <div className={styles.tombstone}>{t('framework.comment_is_deleted')}</div>
 );
 
 export default CommentDeletedTombstone;

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

@@ -44,6 +44,19 @@ class UserDetailComment extends React.Component {
       body: comment.body,
     };
 
+    if (!comment.body) {
+      return (
+        <li
+          tabIndex={0}
+          className={cn(className, styles.root, {
+            [styles.rootSelected]: selected,
+          })}
+        >
+          <CommentDeletedTombstone />
+        </li>
+      );
+    }
+
     return (
       <li
         tabIndex={0}
@@ -84,53 +97,49 @@ class UserDetailComment extends React.Component {
               </Link>
             }
           </div>
-          {comment.body ? (
-            <CommentAnimatedEdit body={comment.body}>
-              <div className={styles.bodyContainer}>
-                <div className={styles.body}>
-                  <Slot
-                    fill="userDetailCommentContent"
-                    className={cn(
-                      styles.commentContent,
-                      'talk-admin-user-detail-comment'
-                    )}
-                    size={1}
-                    defaultComponent={AdminCommentContent}
-                    passthrough={slotPassthrough}
+          <CommentAnimatedEdit body={comment.body}>
+            <div className={styles.bodyContainer}>
+              <div className={styles.body}>
+                <Slot
+                  fill="userDetailCommentContent"
+                  className={cn(
+                    styles.commentContent,
+                    'talk-admin-user-detail-comment'
+                  )}
+                  size={1}
+                  defaultComponent={AdminCommentContent}
+                  passthrough={slotPassthrough}
+                />
+                <a
+                  className={styles.external}
+                  href={`${comment.asset.url}?commentId=${comment.id}`}
+                  target="_blank"
+                >
+                  <Icon name="open_in_new" /> {t('comment.view_context')}
+                </a>
+              </div>
+              <div className={styles.sideActions}>
+                <IfHasLink text={comment.body}>
+                  <span className={styles.hasLinks}>
+                    {/* TODO: translate string */}
+                    <Icon name="error_outline" /> Contains Link
+                  </span>
+                </IfHasLink>
+                <div className={styles.actions}>
+                  <ApproveButton
+                    active={comment.status === 'ACCEPTED'}
+                    onClick={this.approve}
+                    minimal
+                  />
+                  <RejectButton
+                    active={comment.status === 'REJECTED'}
+                    onClick={this.reject}
+                    minimal
                   />
-                  <a
-                    className={styles.external}
-                    href={`${comment.asset.url}?commentId=${comment.id}`}
-                    target="_blank"
-                  >
-                    <Icon name="open_in_new" /> {t('comment.view_context')}
-                  </a>
-                </div>
-                <div className={styles.sideActions}>
-                  <IfHasLink text={comment.body}>
-                    <span className={styles.hasLinks}>
-                      {/* TODO: translate string */}
-                      <Icon name="error_outline" /> Contains Link
-                    </span>
-                  </IfHasLink>
-                  <div className={styles.actions}>
-                    <ApproveButton
-                      active={comment.status === 'ACCEPTED'}
-                      onClick={this.approve}
-                      minimal
-                    />
-                    <RejectButton
-                      active={comment.status === 'REJECTED'}
-                      onClick={this.reject}
-                      minimal
-                    />
-                  </div>
                 </div>
               </div>
-            </CommentAnimatedEdit>
-          ) : (
-            <CommentDeletedTombstone />
-          )}
+            </div>
+          </CommentAnimatedEdit>
         </div>
         <CommentDetails root={root} comment={comment} />
       </li>

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

@@ -85,6 +85,10 @@
   font-weight: 300;
 }
 
+.deleted {
+  background-color: #f0f0f0;
+}
+
 .moderateArticle {
   font-size: 14px;
   margin: 10px 0;

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

@@ -76,6 +76,27 @@ class Comment extends React.Component {
       asset: comment.asset,
     };
 
+    if (!comment.body) {
+      return (
+        <li
+          tabIndex={0}
+          className={cn(
+            className,
+            'mdl-card',
+            selectionStateCSS,
+            styles.root,
+            { [styles.selected]: selected, [styles.dangling]: dangling },
+            'talk-admin-moderate-comment',
+            styles.deleted
+          )}
+          id={`comment_${comment.id}`}
+          ref={this.handleRef}
+        >
+          <CommentDeletedTombstone />
+        </li>
+      );
+    }
+
     return (
       <li
         tabIndex={0}
@@ -134,52 +155,48 @@ class Comment extends React.Component {
               </Link>
             )}
           </div>
-          {comment.body ? (
-            <CommentAnimatedEdit body={comment.body}>
-              <div className={styles.itemBody}>
-                <div className={styles.body}>
-                  <Slot
-                    fill="adminCommentContent"
-                    className={cn(styles.commentContent, 'talk-admin-comment')}
-                    size={1}
-                    defaultComponent={AdminCommentContent}
-                    passthrough={{ ...slotPassthrough, ...formatterSettings }}
-                  />
-                  <div className={styles.commentContentFooter}>
-                    <a
-                      className={styles.external}
-                      href={`${comment.asset.url}?commentId=${comment.id}`}
-                      target="_blank"
-                    >
-                      <Icon name="open_in_new" /> {t('comment.view_context')}
-                    </a>
-                  </div>
-                </div>
-
-                <div className={styles.sideActions}>
-                  <IfHasLink text={comment.body}>
-                    <span className={styles.hasLinks}>
-                      {/* TODO: translate string */}
-                      <Icon name="error_outline" /> Contains Link
-                    </span>
-                  </IfHasLink>
-                  <div className={`actions ${styles.actions}`}>
-                    <ApproveButton
-                      active={comment.status === 'ACCEPTED'}
-                      onClick={this.approve}
-                    />
-                    <RejectButton
-                      active={comment.status === 'REJECTED'}
-                      onClick={this.reject}
-                    />
-                  </div>
-                  <Slot fill="adminSideActions" passthrough={slotPassthrough} />
+          <CommentAnimatedEdit body={comment.body}>
+            <div className={styles.itemBody}>
+              <div className={styles.body}>
+                <Slot
+                  fill="adminCommentContent"
+                  className={cn(styles.commentContent, 'talk-admin-comment')}
+                  size={1}
+                  defaultComponent={AdminCommentContent}
+                  passthrough={{ ...slotPassthrough, ...formatterSettings }}
+                />
+                <div className={styles.commentContentFooter}>
+                  <a
+                    className={styles.external}
+                    href={`${comment.asset.url}?commentId=${comment.id}`}
+                    target="_blank"
+                  >
+                    <Icon name="open_in_new" /> {t('comment.view_context')}
+                  </a>
                 </div>
               </div>
-            </CommentAnimatedEdit>
-          ) : (
-            <CommentDeletedTombstone />
-          )}
+
+              <div className={styles.sideActions}>
+                <IfHasLink text={comment.body}>
+                  <span className={styles.hasLinks}>
+                    {/* TODO: translate string */}
+                    <Icon name="error_outline" /> Contains Link
+                  </span>
+                </IfHasLink>
+                <div className={`actions ${styles.actions}`}>
+                  <ApproveButton
+                    active={comment.status === 'ACCEPTED'}
+                    onClick={this.approve}
+                  />
+                  <RejectButton
+                    active={comment.status === 'REJECTED'}
+                    onClick={this.reject}
+                  />
+                </div>
+                <Slot fill="adminSideActions" passthrough={slotPassthrough} />
+              </div>
+            </div>
+          </CommentAnimatedEdit>
         </div>
         <CommentDetails
           root={root}