From f1cdcb149bbfb8282780df7a3e4d4602fd0e9e96 Mon Sep 17 00:00:00 2001 From: Nick Funk Date: Fri, 22 Nov 2019 16:50:52 -0700 Subject: [PATCH] [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 --- .../ModerateCard/LinkDetailsContainer.css | 16 ++++ .../ModerateCard/LinkDetailsContainer.tsx | 88 +++++++++++++++++++ .../ModerateCardDetailsContainer.tsx | 17 ++-- src/core/client/admin/test/fixtures.ts | 3 + src/locales/en-US/admin.ftl | 4 + 5 files changed, 123 insertions(+), 5 deletions(-) create mode 100644 src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css create mode 100644 src/core/client/admin/components/ModerateCard/LinkDetailsContainer.tsx diff --git a/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css b/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css new file mode 100644 index 000000000..984d48138 --- /dev/null +++ b/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; +} diff --git a/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.tsx b/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.tsx new file mode 100644 index 000000000..e0701d61b --- /dev/null +++ b/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 = ({ + comment, + settings, +}) => { + return ( + <> +
+ + Copy link to this comment + +
+
+ + + +
+
+ + + +
+ + ); +}; + +const enhanced = withFragmentContainer({ + comment: graphql` + fragment LinkDetailsContainer_comment on Comment { + id + story { + id + url + } + } + `, + settings: graphql` + fragment LinkDetailsContainer_settings on Settings { + organization { + url + } + } + `, +})(LinkDetailsContainer); + +export default enhanced; diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx index 32d861c7f..5ffb17e8c 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx +++ b/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 = ({ )} {activeTab === "DETAILS" && ( - + <> + +
+ + )} {activeTab === "HISTORY" && ( @@ -79,12 +84,14 @@ const enhanced = withFragmentContainer({ 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); diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts index 2f352e090..1b76e3efb 100644 --- a/src/core/client/admin/test/fixtures.ts +++ b/src/core/client/admin/test/fixtures.ts @@ -449,6 +449,7 @@ export const stories = createFixtures([ 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([ 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([ createdAt: "2018-11-29T16:01:51.897Z", isClosed: true, status: GQLSTORY_STATUS.CLOSED, + url: "", metadata: { author: undefined, title: "World hunger has been defeated", diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index 9f47a1930..6e99e7fbf 100644 --- a/src/locales/en-US/admin.ftl +++ b/src/locales/en-US/admin.ftl @@ -407,6 +407,10 @@ moderate-toxicityLabel-likely = Likely moderate-toxicityLabel-unlikely = Unlikely moderate-toxicityLabel-maybe = Maybe +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.