[CORL-625] Create link details in the moderation card details tabs (#2721)

* Create link details in the moderation card details tabs

CORL-625

* Use getURLWithCommentID and getLocationOrigin to generate URLs

CORL-625

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

@@ -0,0 +1,16 @@
+.label {
+  font-size: calc(16rem / var(--rem-base));
+  font-weight: var(--font-weight-regular);
+  font-family: var(--font-family-sans-serif);
+  color: var(--palette-text-primary);
+}
+
+.buttonContainer {
+  display: inline-block;
+  padding-right: var(--spacing-2);
+}
+
+.button {
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}

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

@@ -0,0 +1,88 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+
+import { getURLWithCommentID } from "coral-framework/helpers";
+import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
+import { getLocationOrigin } from "coral-framework/utils";
+import { Button, Icon } from "coral-ui/components";
+
+import { LinkDetailsContainer_comment } from "coral-admin/__generated__/LinkDetailsContainer_comment.graphql";
+import { LinkDetailsContainer_settings } from "coral-admin/__generated__/LinkDetailsContainer_settings.graphql";
+
+import styles from "./LinkDetailsContainer.css";
+
+interface Props {
+  comment: LinkDetailsContainer_comment;
+  settings: LinkDetailsContainer_settings;
+}
+
+const LinkDetailsContainer: FunctionComponent<Props> = ({
+  comment,
+  settings,
+}) => {
+  return (
+    <>
+      <div className={styles.label}>
+        <Localized id="moderate-linkDetails-label">
+          Copy link to this comment
+        </Localized>
+      </div>
+      <div className={styles.buttonContainer}>
+        <CopyToClipboard
+          text={getURLWithCommentID(comment.story.url, comment.id)}
+        >
+          <Button
+            color="primary"
+            variant="filled"
+            size="small"
+            className={styles.button}
+          >
+            <Icon size="md">link</Icon>
+            <Localized id="moderate-in-stream-link-copy">
+              <span>In Stream</span>
+            </Localized>
+          </Button>
+        </CopyToClipboard>
+      </div>
+      <div className={styles.buttonContainer}>
+        <CopyToClipboard
+          text={`${getLocationOrigin()}/admin/moderate/comment/${comment.id}`}
+        >
+          <Button
+            color="primary"
+            variant="filled"
+            size="small"
+            className={styles.button}
+          >
+            <Icon size="md">link</Icon>
+            <Localized id="moderate-in-moderation-link-copy">
+              <span>In Moderation</span>
+            </Localized>
+          </Button>
+        </CopyToClipboard>
+      </div>
+    </>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  comment: graphql`
+    fragment LinkDetailsContainer_comment on Comment {
+      id
+      story {
+        id
+        url
+      }
+    }
+  `,
+  settings: graphql`
+    fragment LinkDetailsContainer_settings on Settings {
+      organization {
+        url
+      }
+    }
+  `,
+})(LinkDetailsContainer);
+
+export default enhanced;

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

@@ -10,6 +10,7 @@ import { ModerateCardDetailsContainer_settings as SettingsData } from "coral-adm
 
 import CommentRevisionContainer from "./CommentRevisionContainer";
 import FlagDetailsContainer from "./FlagDetailsContainer";
+import LinkDetailsContainer from "./LinkDetailsContainer";
 
 import styles from "./ModerateCardDetailsContainer.css";
 
@@ -61,11 +62,15 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
         )}
       </TabBar>
       {activeTab === "DETAILS" && (
-        <FlagDetailsContainer
-          comment={comment}
-          settings={settings}
-          onUsernameClick={onUsernameClick}
-        />
+        <>
+          <LinkDetailsContainer comment={comment} settings={settings} />
+          <hr />
+          <FlagDetailsContainer
+            comment={comment}
+            settings={settings}
+            onUsernameClick={onUsernameClick}
+          />
+        </>
       )}
       {activeTab === "HISTORY" && (
         <CommentRevisionContainer comment={comment} settings={settings} />
@@ -79,12 +84,14 @@ const enhanced = withFragmentContainer<Props>({
     fragment ModerateCardDetailsContainer_comment on Comment {
       ...FlagDetailsContainer_comment
       ...CommentRevisionContainer_comment
+      ...LinkDetailsContainer_comment
     }
   `,
   settings: graphql`
     fragment ModerateCardDetailsContainer_settings on Settings {
       ...FlagDetailsContainer_settings
       ...CommentRevisionContainer_settings
+      ...LinkDetailsContainer_settings
     }
   `,
 })(ModerateCardDetailsContainer);

src/core/client/admin/test/fixtures.ts

@@ -449,6 +449,7 @@ export const stories = createFixtures<GQLStory>([
     isClosed: false,
     status: GQLSTORY_STATUS.OPEN,
     createdAt: "2018-11-29T16:01:51.897Z",
+    url: "",
     metadata: {
       author: "Vin Hoa",
       title: "Finally a Cure for Cancer",
@@ -461,6 +462,7 @@ export const stories = createFixtures<GQLStory>([
     isClosed: false,
     status: GQLSTORY_STATUS.OPEN,
     createdAt: "2018-11-29T16:01:51.897Z",
+    url: "",
     metadata: {
       author: "Linh Nguyen",
       title: "First Colony on Mars",
@@ -473,6 +475,7 @@ export const stories = createFixtures<GQLStory>([
     createdAt: "2018-11-29T16:01:51.897Z",
     isClosed: true,
     status: GQLSTORY_STATUS.CLOSED,
+    url: "",
     metadata: {
       author: undefined,
       title: "World hunger has been defeated",

src/locales/en-US/admin.ftl

@@ -407,6 +407,10 @@ moderate-toxicityLabel-likely = Likely <score></score>
 moderate-toxicityLabel-unlikely = Unlikely <score></score>
 moderate-toxicityLabel-maybe = Maybe <score></score>
 
+moderate-linkDetails-label = Copy link to this comment
+moderate-in-stream-link-copy = In Stream
+moderate-in-moderation-link-copy = In Moderation
+
 moderate-emptyQueue-pending = Nicely done! There are no more pending comments to moderate.
 moderate-emptyQueue-reported = Nicely done! There are no more reported comments to moderate.
 moderate-emptyQueue-unmoderated = Nicely done! All comments have been moderated.