[CORL 568] more user drawer links (#2532)

* add drawer links for in reply to and moderated by

* fix ts

* update spec

src/core/client/admin/components/ModerateCard/InReplyTo.css

@@ -7,3 +7,7 @@
 .username {
   color: var(--palette-grey-main);
 }
+
+.usernameButton {
+  display: inline-flex;
+}

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} />);

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"

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
         }
       }

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

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