[CORL-399] Hide Non-Visible Comments (#2344)

* feat: added support for hiding non-visible comments

* fix: updated copy

* feat: refined style

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>

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)>
 `;
 

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>
 `;

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(

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

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