persist commentStatus onto notification

allows us to retain state of comment snapshotted at the time
the notification was created.

client/src/core/client/stream/tabs/Notifications/NotificationCommentContainer.tsx

@@ -7,16 +7,21 @@ import { GQLCOMMENT_STATUS } from "coral-framework/schema";
 import HTMLContent from "coral-stream/common/HTMLContent";
 import { Timestamp } from "coral-ui/components/v2";
 
-import { NotificationCommentContainer_comment } from "coral-stream/__generated__/NotificationCommentContainer_comment.graphql";
+import {
+  COMMENT_STATUS,
+  NotificationCommentContainer_comment,
+} from "coral-stream/__generated__/NotificationCommentContainer_comment.graphql";
 
 import styles from "./NotificationCommentContainer.css";
 
 interface Props {
   comment: NotificationCommentContainer_comment;
+  status: COMMENT_STATUS;
 }
 
 const NotificationCommentContainer: FunctionComponent<Props> = ({
   comment,
+  status,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -26,28 +31,28 @@ const NotificationCommentContainer: FunctionComponent<Props> = ({
 
   return (
     <>
-      {comment.status === GQLCOMMENT_STATUS.APPROVED && isOpen && (
+      {status === GQLCOMMENT_STATUS.APPROVED && isOpen && (
         <button className={styles.toggle} onClick={onToggleOpenClosed}>
           <Localized id="notification-comment-toggle-approved-open">
             Approved comment
           </Localized>
         </button>
       )}
-      {comment.status === GQLCOMMENT_STATUS.APPROVED && !isOpen && (
+      {status === GQLCOMMENT_STATUS.APPROVED && !isOpen && (
         <button className={styles.toggle} onClick={onToggleOpenClosed}>
           <Localized id="notification-comment-toggle-approved-closed">
             + Approved comment
           </Localized>
         </button>
       )}
-      {comment.status === GQLCOMMENT_STATUS.REJECTED && isOpen && (
+      {status === GQLCOMMENT_STATUS.REJECTED && isOpen && (
         <button className={styles.toggle} onClick={onToggleOpenClosed}>
           <Localized id="notification-comment-toggle-rejected-open">
             Rejected comment
           </Localized>
         </button>
       )}
-      {comment.status === GQLCOMMENT_STATUS.REJECTED && !isOpen && (
+      {status === GQLCOMMENT_STATUS.REJECTED && !isOpen && (
         <button className={styles.toggle} onClick={onToggleOpenClosed}>
           <Localized id="notification-comment-toggle-rejected-closed">
             + Rejected comment

client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 const NotificationContainer: FunctionComponent<Props> = ({
-  notification: { title, body, comment, createdAt },
+  notification: { title, body, comment, createdAt, commentStatus },
   viewer,
 }) => {
   const seen = useMemo(() => {
@@ -52,7 +52,10 @@ const NotificationContainer: FunctionComponent<Props> = ({
         {body && <div className={cn(styles.body)}>{body}</div>}
         {comment && (
           <div className={styles.contextItem}>
-            <NotificationCommentContainer comment={comment} />
+            <NotificationCommentContainer
+              comment={comment}
+              status={commentStatus ? commentStatus : comment.status}
+            />
           </div>
         )}
         <div className={styles.footer}>
@@ -78,7 +81,9 @@ const enhanced = withFragmentContainer<Props>({
       body
       comment {
         ...NotificationCommentContainer_comment
+        status
       }
+      commentStatus
     }
   `,
 })(NotificationContainer);

server/src/core/server/graph/resolvers/Notification.ts

@@ -23,6 +23,7 @@ export const NotificationResolver: Required<
 
     return comment;
   },
+  commentStatus: ({ commentStatus }) => commentStatus,
   dsaReport: async ({ reportID }, input, ctx) => {
     if (!reportID) {
       return null;

server/src/core/server/graph/schema/schema.graphql

@@ -4591,6 +4591,14 @@ type Notification {
   """
   comment: Comment
 
+  """
+  commentStatus is the optional status of the comment when the notification
+  was created. This allows for the context of the state of the comment to be
+  persisted even if the comment reference undergoes multiple moderation actions
+  since the notification was created.
+  """
+  commentStatus: COMMENT_STATUS
+
   """
   dsaReport is the details of the DSA Report related to the notification.
   This is usually in reference to the comment that is also related to

server/src/core/server/models/notifications/notification.ts

@@ -1,5 +1,7 @@
 import { MongoContext } from "coral-server/data/context";
 
+import { GQLCOMMENT_STATUS } from "coral-server/graph/schema/__generated__/types";
+
 import { ConnectionInput, Query, resolveConnection } from "../helpers";
 import { TenantResource } from "../tenant";
 import { User } from "../user";
@@ -14,7 +16,9 @@ export interface Notification extends TenantResource {
   ownerID: string;
 
   reportID?: string;
+
   commentID?: string;
+  commentStatus?: GQLCOMMENT_STATUS;
 
   title?: string;
   body?: string;

server/src/core/server/services/notifications/internal/context.ts

@@ -85,6 +85,7 @@ export class InternalNotificationContext {
           }
         ),
         commentID: comment.id,
+        commentStatus: comment.status,
       });
       result.attempted = true;
     } else if (type === NotificationType.COMMENT_APPROVED && comment) {
@@ -107,6 +108,7 @@ export class InternalNotificationContext {
           }
         ),
         commentID: comment.id,
+        commentStatus: comment.status,
       });
       result.attempted = true;
     } else if (type === NotificationType.COMMENT_REJECTED && comment) {
@@ -129,6 +131,7 @@ export class InternalNotificationContext {
           }
         ),
         commentID: comment.id,
+        commentStatus: comment.status,
       });
       result.attempted = true;
     }