From ed4e5fa2a8343f9b877bfdbf54e3da904d1a1a3a Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 6 Jun 2019 22:24:02 +0000
Subject: [PATCH] [CORL-399] Hide Non-Visible Comments (#2344)

* feat: added support for hiding non-visible comments

* fix: updated copy

* feat: refined style
---
 .../Comments/PermalinkView/PermalinkView.tsx  | 11 +++--
 .../__snapshots__/PermalinkView.spec.tsx.snap | 16 ++++---
 ...permalinkViewCommentNotFound.spec.tsx.snap | 12 +++--
 .../server/graph/tenant/loaders/Comments.ts   | 46 ++++++++++++++++++-
 src/locales/en-US/stream.ftl                  |  2 +-
 src/locales/pt-BR/stream.ftl                  |  3 +-
 6 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx
index fedafaf0d..e0e0cf187 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkView.tsx
@@ -4,6 +4,7 @@ import React, { FunctionComponent, MouseEvent } from "react";
 import { PropTypesOf } from "coral-framework/types";
 import {
   Button,
+  CallOut,
   Flex,
   HorizontalGutter,
   Typography,
@@ -69,9 +70,13 @@ const PermalinkView: FunctionComponent<PermalinkViewProps> = ({
         )}
       </Flex>
       {!comment && (
-        <Localized id="comments-permalinkView-commentNotFound">
-          <Typography>Comment not found</Typography>
-        </Localized>
+        <CallOut fullWidth>
+          <Localized id="comments-permalinkView-commentRemovedOrDoesNotExist">
+            <Typography>
+              This comment has been removed or does not exist.
+            </Typography>
+          </Localized>
+        </CallOut>
       )}
       {comment && (
         <HorizontalGutter>
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap b/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap
index bfdd3e422..e56daed07 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/PermalinkView.spec.tsx.snap
@@ -47,13 +47,17 @@ exports[`renders comment not found 1`] = `
       </ForwardRef(forwardRef)>
     </Localized>
   </ForwardRef(forwardRef)>
-  <Localized
-    id="comments-permalinkView-commentNotFound"
+  <withPropsOnChange(CallOut)
+    fullWidth={true}
   >
-    <ForwardRef(forwardRef)>
-      Comment not found
-    </ForwardRef(forwardRef)>
-  </Localized>
+    <Localized
+      id="comments-permalinkView-commentRemovedOrDoesNotExist"
+    >
+      <ForwardRef(forwardRef)>
+        This comment has been removed or does not exist.
+      </ForwardRef(forwardRef)>
+    </Localized>
+  </withPropsOnChange(CallOut)>
 </ForwardRef(forwardRef)>
 `;
 
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 80e5d1244..ab5e0a1a8 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -67,11 +67,15 @@ exports[`renders permalink view with unknown comment 1`] = `
         View Full Discussion
       </a>
     </div>
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    <div
+      className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
     >
-      Comment not found
-    </p>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        This comment has been removed or does not exist.
+      </p>
+    </div>
   </div>
 </section>
 `;
diff --git a/src/core/server/graph/tenant/loaders/Comments.ts b/src/core/server/graph/tenant/loaders/Comments.ts
index 6b2232c34..75f792cb4 100644
--- a/src/core/server/graph/tenant/loaders/Comments.ts
+++ b/src/core/server/graph/tenant/loaders/Comments.ts
@@ -7,6 +7,7 @@ import {
   CommentToRepliesArgs,
   GQLActionPresence,
   GQLCOMMENT_SORT,
+  GQLUSER_ROLE,
   QueryToCommentsArgs,
   StoryToCommentsArgs,
 } from "coral-server/graph/tenant/schema/__generated__/types";
@@ -20,8 +21,10 @@ import {
   retrieveCommentUserConnection,
   retrieveManyComments,
 } from "coral-server/models/comment";
+import { hasVisibleStatus } from "coral-server/models/comment/helpers";
 import { Connection } from "coral-server/models/helpers/connection";
 import { retrieveSharedModerationQueueQueuesCounts } from "coral-server/models/story/counts/shared";
+import { User } from "coral-server/models/user";
 
 import { SingletonResolver } from "./util";
 
@@ -42,9 +45,48 @@ const primeCommentsFromConnection = (ctx: Context) => (
   return connection;
 };
 
+/**
+ * mapVisibleComment will provide a mapping function that will mark as null each
+ * comment that should not be visible to the target User.
+ *
+ * @param user the User to determine the visibility status with based on
+ * permissions
+ */
+const mapVisibleComment = (user?: Pick<User, "role">) => {
+  // Check to see if this user is privileged and can view non-visible comments.
+  const isPrivilegedUser =
+    user && [GQLUSER_ROLE.ADMIN, GQLUSER_ROLE.MODERATOR].includes(user.role);
+
+  // Return a function that will map out the non-visible comments if needed.
+  return (comment: Readonly<Comment> | null) => {
+    if (comment === null) {
+      return null;
+    }
+
+    if (hasVisibleStatus(comment) || isPrivilegedUser) {
+      return comment;
+    }
+
+    return null;
+  };
+};
+
+/**
+ * mapVisibleComments will map each comment an array to an array of Comment and
+ * null.
+ *
+ * @param user the User to determine the visibility status with based on
+ * permissions
+ */
+const mapVisibleComments = (user?: Pick<User, "role">) => (
+  comments: Array<Readonly<Comment> | null>
+): Array<Readonly<Comment> | null> => comments.map(mapVisibleComment(user));
+
 export default (ctx: Context) => ({
   comment: new DataLoader((ids: string[]) =>
-    retrieveManyComments(ctx.mongo, ctx.tenant.id, ids)
+    retrieveManyComments(ctx.mongo, ctx.tenant.id, ids).then(
+      mapVisibleComments(ctx.user)
+    )
   ),
   forFilter: ({ first = 10, after, storyID, status }: QueryToCommentsArgs) =>
     retrieveCommentConnection(ctx.mongo, ctx.tenant.id, {
@@ -65,7 +107,7 @@ export default (ctx: Context) => ({
         // This should only ever be accessed when a user is logged in. It should
         // be safe to get the user here, but we'll throw an error anyways just
         // in case.
-        throw new Error("can't get action presense of an undefined user");
+        throw new Error("can't get action presence of an undefined user");
       }
 
       return retrieveManyUserActionPresence(
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index b90bc334c..771127327 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -32,7 +32,7 @@ comments-permalinkPopover =
   .description = A dialog showing a permalink to the comment
 comments-permalinkButton-share = Share
 comments-permalinkView-viewFullDiscussion = View Full Discussion
-comments-permalinkView-commentNotFound = Comment not found
+comments-permalinkView-commentRemovedOrDoesNotExist = This comment has been removed or does not exist.
 
 comments-rte-bold =
   .title = Bold
diff --git a/src/locales/pt-BR/stream.ftl b/src/locales/pt-BR/stream.ftl
index 789fa07e3..8962a734e 100644
--- a/src/locales/pt-BR/stream.ftl
+++ b/src/locales/pt-BR/stream.ftl
@@ -32,8 +32,7 @@ comments-permalinkPopover =
   .description = Uma caixa de diálogo mostrando um link permanente para o comentário
 comments-permalinkButton-share = Compartilhar
 comments-permalinkView-viewFullDiscussion = Ver discussão completa
-comments-permalinkView-commentNotFound = Comentário não encontrado
-
+comments-permalinkView-commentRemovedOrDoesNotExist = Este comentário foi removido ou não existe.
 comments-rte-bold =
   .title = Negrito