From 941a385d531d1f9c14b7b1c7f66f532020bf2522 Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Mon, 30 Sep 2019 09:18:34 -0400 Subject: [PATCH] [CORL-51] show comment revisions (#2590) * add comment revisions * reverse history order * add strings * update fixtures * fix fixtures --- .../ModerateCard/CommentRevisionContainer.tsx | 67 ++++++++++++++ .../admin/components/ModerateCard/Markers.css | 2 +- .../ModerateCard/MarkersContainer.spec.tsx | 6 ++ .../ModerateCard/MarkersContainer.tsx | 15 ++-- .../components/ModerateCard/ModerateCard.css | 5 ++ .../ModerateCard/ModerateCard.spec.tsx | 1 + .../components/ModerateCard/ModerateCard.tsx | 9 ++ .../ModerateCard/ModerateCardContainer.tsx | 4 + .../ModerateCardDetailsContainer.css | 4 + .../ModerateCardDetailsContainer.tsx | 90 +++++++++++++++++++ .../MarkersContainer.spec.tsx.snap | 14 ++- src/core/client/admin/test/fixtures.ts | 10 +++ src/locales/en-US/admin.ftl | 3 + 13 files changed, 222 insertions(+), 8 deletions(-) create mode 100644 src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx create mode 100644 src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css create mode 100644 src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx diff --git a/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx b/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx new file mode 100644 index 000000000..5581b68cf --- /dev/null +++ b/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx @@ -0,0 +1,67 @@ +import React, { FunctionComponent } from "react"; + +import { CommentRevisionContainer_comment as CommentData } from "coral-admin/__generated__/CommentRevisionContainer_comment.graphql"; +import { CommentRevisionContainer_settings as SettingsData } from "coral-admin/__generated__/CommentRevisionContainer_settings.graphql"; +import { graphql, withFragmentContainer } from "coral-framework/lib/relay"; +import { HorizontalGutter, Timestamp } from "coral-ui/components"; + +import CommentContent from "./CommentContent"; + +interface Props { + comment: CommentData; + settings: SettingsData; +} + +const CommentRevisionContainer: FunctionComponent = ({ + settings, + comment, +}) => { + return ( + + {comment.revisionHistory + .concat() + .reverse() + .filter(c => + comment && comment.revision && comment.revision.id + ? comment.revision.id !== c.id + : true + ) + .map(c => ( +
+ {c.createdAt} + + {c.body ? c.body : ""} + +
+ ))} + + ); +}; + +const enhanced = withFragmentContainer({ + comment: graphql` + fragment CommentRevisionContainer_comment on Comment { + revision { + id + } + revisionHistory { + id + body + createdAt + } + } + `, + settings: graphql` + fragment CommentRevisionContainer_settings on Settings { + wordList { + banned + suspect + } + } + `, +})(CommentRevisionContainer); + +export default enhanced; diff --git a/src/core/client/admin/components/ModerateCard/Markers.css b/src/core/client/admin/components/ModerateCard/Markers.css index 123823806..8f84cbe58 100644 --- a/src/core/client/admin/components/ModerateCard/Markers.css +++ b/src/core/client/admin/components/ModerateCard/Markers.css @@ -16,5 +16,5 @@ } .detailsDivider { - border: 1px solid var(--palette-grey-lightest); + border-color: var(--palette-grey-lightest); } diff --git a/src/core/client/admin/components/ModerateCard/MarkersContainer.spec.tsx b/src/core/client/admin/components/ModerateCard/MarkersContainer.spec.tsx index 607df53d2..3df1c8d8c 100644 --- a/src/core/client/admin/components/ModerateCard/MarkersContainer.spec.tsx +++ b/src/core/client/admin/components/ModerateCard/MarkersContainer.spec.tsx @@ -13,6 +13,9 @@ it("renders all markers", () => { const props: PropTypesOf = { comment: { status: "PREMOD", + editing: { + edited: false, + }, revision: { actionCounts: { flag: { @@ -53,6 +56,9 @@ it("renders some markers", () => { const props: PropTypesOf = { comment: { status: "PREMOD", + editing: { + edited: false, + }, revision: { actionCounts: { flag: { diff --git a/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx b/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx index f0c087b4d..ff5468b7a 100644 --- a/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx +++ b/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx @@ -6,8 +6,8 @@ import { MarkersContainer_comment } from "coral-admin/__generated__/MarkersConta import { MarkersContainer_settings } from "coral-admin/__generated__/MarkersContainer_settings.graphql"; import { withFragmentContainer } from "coral-framework/lib/relay"; import { Marker, MarkerCount } from "coral-ui/components"; -import FlagDetailsContainer from "./FlagDetailsContainer"; import Markers from "./Markers"; +import ModerateCardDetailsContainer from "./ModerateCardDetailsContainer"; interface MarkersContainerProps { comment: MarkersContainer_comment; @@ -123,8 +123,10 @@ export class MarkersContainer extends React.Component { return ( { const enhanced = withFragmentContainer({ comment: graphql` fragment MarkersContainer_comment on Comment { - ...FlagDetailsContainer_comment + ...ModerateCardDetailsContainer_comment status + editing { + edited + } revision { actionCounts { flag { @@ -168,7 +173,7 @@ const enhanced = withFragmentContainer({ `, settings: graphql` fragment MarkersContainer_settings on Settings { - ...FlagDetailsContainer_settings + ...ModerateCardDetailsContainer_settings } `, })(MarkersContainer); diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.css b/src/core/client/admin/components/ModerateCard/ModerateCard.css index 2de706b24..92444ae8f 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCard.css +++ b/src/core/client/admin/components/ModerateCard/ModerateCard.css @@ -159,4 +159,9 @@ .timestamp { color: var(--palette-grey-lighter); +} + +.edited { + color: var(--palette-grey-lighter); + padding-left: var(--spacing-2) } \ No newline at end of file diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx index 7f46f5b47..c07300053 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx +++ b/src/core/client/admin/components/ModerateCard/ModerateCard.spec.tsx @@ -14,6 +14,7 @@ const baseProps: PropTypesOf = { username: "Theon", createdAt: "2018-11-29T16:01:51.897Z", body: "content", + edited: false, inReplyTo: null, comment: {}, settings: {}, diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx index b2ddcec96..dcd5f6e6d 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx +++ b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx @@ -57,6 +57,7 @@ interface Props { */ dangling?: boolean; deleted?: boolean; + edited: boolean; } const ModerateCard: FunctionComponent = ({ @@ -85,6 +86,7 @@ const ModerateCard: FunctionComponent = ({ mini = false, hideUsername = false, deleted = false, + edited, }) => { const commentBody = deleted ? ( @@ -131,6 +133,13 @@ const ModerateCard: FunctionComponent = ({ )} {createdAt} + {edited && ( + + + (edited) + + + )} = ({ mini={mini} hideUsername={hideUsername} deleted={comment.deleted ? comment.deleted : false} + edited={comment.editing.edited} /> @@ -213,6 +214,9 @@ const enhanced = withFragmentContainer({ revision { id } + editing { + edited + } parent { author { id diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css new file mode 100644 index 000000000..b0f863f05 --- /dev/null +++ b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css @@ -0,0 +1,4 @@ +.button { + text-transform: uppercase; + font-size: 14px; +} \ No newline at end of file diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx new file mode 100644 index 000000000..ce4bfdfa8 --- /dev/null +++ b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx @@ -0,0 +1,90 @@ +import { Localized } from "fluent-react/compat"; +import React, { FunctionComponent, useState } from "react"; +import { graphql } from "react-relay"; + +import { ModerateCardDetailsContainer_comment as CommentData } from "coral-admin/__generated__/ModerateCardDetailsContainer_comment.graphql"; +import { ModerateCardDetailsContainer_settings as SettingsData } from "coral-admin/__generated__/ModerateCardDetailsContainer_settings.graphql"; +import { withFragmentContainer } from "coral-framework/lib/relay"; +import { Flex, HorizontalGutter, Icon, Tab, TabBar } from "coral-ui/components"; + +import CommentRevisionContainer from "./CommentRevisionContainer"; +import FlagDetailsContainer from "./FlagDetailsContainer"; +import styles from "./ModerateCardDetailsContainer.css"; + +interface Props { + comment: CommentData; + settings: SettingsData; + onUsernameClick: (id?: string) => void; + hasDetails: boolean; + hasRevisions: boolean; +} + +const ModerateCardDetailsContainer: FunctionComponent = ({ + comment, + onUsernameClick, + settings, + hasDetails, + hasRevisions, +}) => { + const [activeTab, setActiveTab] = useState<"DETAILS" | "HISTORY">( + hasDetails ? "DETAILS" : "HISTORY" + ); + + return ( + + setActiveTab(id as "DETAILS" | "HISTORY")} + > + {hasDetails && ( + + + list + + Details + + + + )} + {hasRevisions && ( + + + edit + + Edit history + + + + )} + + {activeTab === "DETAILS" && ( + + )} + {activeTab === "HISTORY" && ( + + )} + + ); +}; + +const enhanced = withFragmentContainer({ + comment: graphql` + fragment ModerateCardDetailsContainer_comment on Comment { + ...FlagDetailsContainer_comment + ...CommentRevisionContainer_comment + } + `, + settings: graphql` + fragment ModerateCardDetailsContainer_settings on Settings { + ...FlagDetailsContainer_settings + ...CommentRevisionContainer_settings + } + `, +})(ModerateCardDetailsContainer); + +export default enhanced; diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap index bb93cb3eb..53ec9f5c7 100644 --- a/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap +++ b/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap @@ -3,9 +3,12 @@ exports[`renders all markers 1`] = ` ({ edges: [], pageInfo: { endCursor: null, hasNextPage: false }, }, + editing: { + edited: false, + }, + revisionHistory: [ + { + id: "revision", + body: "Comment body", + createdAt: "2018-07-06T18:24:00.000Z", + }, + ], revision: { actionCounts: { flag: { diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index 043e9ade4..b2394289c 100644 --- a/src/locales/en-US/admin.ftl +++ b/src/locales/en-US/admin.ftl @@ -412,6 +412,7 @@ moderate-emptyQueue-reported = Nicely done! There are no more reported comments moderate-emptyQueue-unmoderated = Nicely done! All comments have been moderated. moderate-emptyQueue-rejected = There are no rejected comments. +moderate-comment-edited = (edited) moderate-comment-inReplyTo = Reply to moderate-comment-viewContext = View Context moderate-comment-rejectButton = @@ -460,6 +461,8 @@ moderate-searchBar-comboBoxTextField = moderate-searchBar-goTo = Go to moderate-searchBar-seeAllResults = See all results +moderateCardDetails-tab-details = Details +moderateCardDetails-tab-edits = Edit history ### Moderate User History Drawer moderate-user-drawer-email =