Show the viewer's username in "moderated by" on moderation cards (#2573)

If a mod is looking at a card they themselves moderated, we want their
username to show up under "moderated by". This helps them recognize cards
they themselves moderated.

CORL-615

src/core/client/admin/components/ModerateCard/ModeratedByContainer.spec.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { removeFragmentRefs } from "coral-framework/testHelpers";
+import { PropTypesOf } from "coral-framework/types";
+
+import ModeratedByContainer from "./ModeratedByContainer";
+
+const ModeratedByContainerN = removeFragmentRefs(ModeratedByContainer);
+
+it("viewer's username shows on moderation cards moderated by viewer", () => {
+  const props: PropTypesOf<typeof ModeratedByContainerN> = {
+    comment: {
+      id: "comment-id",
+      statusLiveUpdated: false,
+      statusHistory: {
+        edges: [
+          {
+            moderator: {
+              id: "viewer",
+              username: "viewer",
+            },
+          },
+        ],
+      },
+    },
+    viewer: {
+      id: "viewer",
+      username: "viewer",
+    },
+    onUsernameClicked: (id?: string | null) => {
+      return;
+    },
+  };
+
+  const renderer = createRenderer();
+  renderer.render(<ModeratedByContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx

@@ -29,7 +29,7 @@ const ModeratedByContainer: React.FunctionComponent<Props> = ({
       <Localized id="moderate-comment-moderatedBySystem">System</Localized>
     );
   } else if (viewer.id === comment.statusHistory.edges[0].node.moderator.id) {
-    moderatedBy = null;
+    moderatedBy = viewer.username ? <>{viewer.username}</> : null;
   } else {
     moderatedBy = <>{comment.statusHistory.edges[0].node.moderator.username}</>;
     id = comment.statusHistory.edges[0].node.moderator.id;
@@ -73,6 +73,7 @@ const enhanced = withFragmentContainer<Props>({
   viewer: graphql`
     fragment ModeratedByContainer_viewer on User {
       id
+      username
     }
   `,
 })(ModeratedByContainer);

src/core/client/admin/components/ModerateCard/__snapshots__/ModeratedByContainer.spec.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`viewer's username shows on moderation cards moderated by viewer 1`] = `
+<ForwardRef(Relay(ModeratedByContainer))
+  comment={
+    Object {
+      "id": "comment-id",
+      "statusHistory": Object {
+        "edges": Array [
+          Object {
+            "moderator": Object {
+              "id": "viewer",
+              "username": "viewer",
+            },
+          },
+        ],
+      },
+      "statusLiveUpdated": false,
+    }
+  }
+  onUsernameClicked={[Function]}
+  viewer={
+    Object {
+      "id": "viewer",
+      "username": "viewer",
+    }
+  }
+/>
+`;