From d2af78d3d7f26f5de36ebbdf8de95f93fd073652 Mon Sep 17 00:00:00 2001
From: Tessa Thornton <tessathornton@gmail.com>
Date: Fri, 6 Sep 2019 12:01:19 -0600
Subject: [PATCH] [CORL 568] more user drawer links (#2532)

* add drawer links for in reply to and moderated by

* fix ts

* update spec
---
 .../components/ModerateCard/InReplyTo.css     |  4 ++++
 .../ModerateCard/ModerateCard.spec.tsx        |  5 +++-
 .../components/ModerateCard/ModerateCard.tsx  | 24 +++++++++++++++----
 .../ModerateCard/ModerateCardContainer.tsx    | 13 +++++-----
 .../ModerateCard/ModeratedByContainer.tsx     | 17 +++++++++----
 .../__snapshots__/ModerateCard.spec.tsx.snap  | 11 ++++++---
 6 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/core/client/admin/components/ModerateCard/InReplyTo.css b/src/core/client/admin/components/ModerateCard/InReplyTo.css
index 219436e13..bd62abb8c 100644
--- a/src/core/client/admin/components/ModerateCard/InReplyTo.css
+++ b/src/core/client/admin/components/ModerateCard/InReplyTo.css
@@ -7,3 +7,7 @@
 .username {
   color: var(--palette-grey-main);
 }
+
+.usernameButton {
+  display: inline-flex;
+}
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx
index a519c7565..7f46f5b47 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx
@@ -42,7 +42,10 @@ it("renders correctly", () => {
 it("renders reply correctly", () => {
   const props: PropTypesOf<typeof ModerateCardN> = {
     ...baseProps,
-    inReplyTo: "Julian",
+    inReplyTo: {
+      username: "Julian",
+      id: "1234",
+    },
   };
   const renderer = createRenderer();
   renderer.render(<ModerateCardN {...props} />);
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
index 860a43897..b19c519a7 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
@@ -28,7 +28,10 @@ interface Props {
   username: string;
   createdAt: string;
   body: string;
-  inReplyTo: string | null;
+  inReplyTo?: {
+    id: string;
+    username: string | null;
+  } | null;
   comment: PropTypesOf<typeof MarkersContainer>["comment"];
   settings: PropTypesOf<typeof MarkersContainer>["settings"];
   status: "approved" | "rejected" | "undecided";
@@ -44,7 +47,7 @@ interface Props {
   onApprove: () => void;
   onReject: () => void;
   onFeature: () => void;
-  onUsernameClick: () => void;
+  onUsernameClick: (id?: string) => void;
   mini?: boolean;
   hideUsername?: boolean;
   /**
@@ -96,6 +99,11 @@ const ModerateCard: FunctionComponent<Props> = ({
   const commentAuthorClick = useCallback(() => {
     onUsernameClick();
   }, [onUsernameClick]);
+  const commentParentAuthorClick = useCallback(() => {
+    if (inReplyTo) {
+      onUsernameClick(inReplyTo.id);
+    }
+  }, [onUsernameClick, inReplyTo]);
   return (
     <Card
       className={cn(
@@ -129,9 +137,14 @@ const ModerateCard: FunctionComponent<Props> = ({
                 enabled={!deleted}
               />
             </Flex>
-            {inReplyTo && (
+            {inReplyTo && inReplyTo.username && (
               <div>
-                <InReplyTo>{inReplyTo}</InReplyTo>
+                <BaseButton
+                  onClick={commentParentAuthorClick}
+                  className={styles.username}
+                >
+                  <InReplyTo>{inReplyTo.username}</InReplyTo>
+                </BaseButton>
               </div>
             )}
           </div>
@@ -188,7 +201,8 @@ const ModerateCard: FunctionComponent<Props> = ({
           className={cn(styles.aside, {
             [styles.asideWithoutReplyTo]: !inReplyTo,
             [styles.asideMini]: mini && !inReplyTo,
-            [styles.asideMiniWithReplyTo]: mini && inReplyTo,
+            [styles.asideMiniWithReplyTo]:
+              mini && inReplyTo && inReplyTo.username,
           })}
           alignItems="center"
           direction="column"
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
index baaad4ce6..7d8cfb74a 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
@@ -158,11 +158,7 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
           }
           createdAt={comment.createdAt}
           body={comment.body!}
-          inReplyTo={
-            comment.parent &&
-            comment.parent.author &&
-            comment.parent.author.username
-          }
+          inReplyTo={comment.parent && comment.parent.author}
           comment={comment}
           settings={settings}
           dangling={danglingLogic(comment.status)}
@@ -176,7 +172,11 @@ const ModerateCardContainer: FunctionComponent<Props> = ({
           onFeature={onFeature}
           onUsernameClick={onUsernameClicked}
           moderatedBy={
-            <ModeratedByContainer viewer={viewer} comment={comment} />
+            <ModeratedByContainer
+              onUsernameClicked={onUsernameClicked}
+              viewer={viewer}
+              comment={comment}
+            />
           }
           showStory={showStoryInfo}
           storyTitle={
@@ -215,6 +215,7 @@ const enhanced = withFragmentContainer<Props>({
       }
       parent {
         author {
+          id
           username
         }
       }
diff --git a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx
index 8e87a02b5..98097097b 100644
--- a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx
@@ -1,24 +1,28 @@
 import { Localized } from "fluent-react/compat";
-import React from "react";
+import React, { useCallback } from "react";
 import { graphql } from "react-relay";
 
 import { ModeratedByContainer_comment } from "coral-admin/__generated__/ModeratedByContainer_comment.graphql";
 import { ModeratedByContainer_viewer } from "coral-admin/__generated__/ModeratedByContainer_viewer.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
+import { BaseButton } from "coral-ui/components";
 
 import styles from "./ModeratedByContainer.css";
 
 interface Props {
   viewer: ModeratedByContainer_viewer;
   comment: ModeratedByContainer_comment;
+  onUsernameClicked: (id?: string | null) => void;
 }
 
 const ModeratedByContainer: React.FunctionComponent<Props> = ({
   comment,
   viewer,
+  onUsernameClicked,
 }) => {
   let moderatedBy: React.ReactElement | null;
-  if (!comment.statusLiveUpdated || comment.statusHistory.edges.length === 0) {
+  let id: string | null = null;
+  if (comment.statusHistory.edges.length === 0) {
     moderatedBy = null;
   } else if (comment.statusHistory.edges[0].node.moderator === null) {
     moderatedBy = (
@@ -28,19 +32,24 @@ const ModeratedByContainer: React.FunctionComponent<Props> = ({
     moderatedBy = null;
   } else {
     moderatedBy = <>{comment.statusHistory.edges[0].node.moderator.username}</>;
+    id = comment.statusHistory.edges[0].node.moderator.id;
   }
 
   if (!moderatedBy) {
     return null;
   }
 
+  const onClick = useCallback(() => {
+    onUsernameClicked(id);
+  }, [onUsernameClicked, comment]);
+
   return (
-    <div>
+    <BaseButton onClick={onClick}>
       <Localized id="moderate-comment-moderatedBy">
         <div className={styles.moderatedBy}>Moderated By</div>
       </Localized>
       <div className={styles.moderatedByUsername}>{moderatedBy}</div>
-    </div>
+    </BaseButton>
   );
 };
 
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
index dc05c612c..3cac76e74 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
@@ -481,9 +481,14 @@ exports[`renders reply correctly 1`] = `
           />
         </ForwardRef(forwardRef)>
         <div>
-          <InReplyTo>
-            Julian
-          </InReplyTo>
+          <ForwardRef(forwardRef)
+            className="ModerateCard-username"
+            onClick={[Function]}
+          >
+            <InReplyTo>
+              Julian
+            </InReplyTo>
+          </ForwardRef(forwardRef)>
         </div>
       </div>
       <CommentContent