Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CORL-1168] Other Flagging in Admin #3014

Merged
merged 1 commit into from Jul 13, 2020
Merged

[CORL-1168] Other Flagging in Admin #3014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
48 changes: 48 additions & 0 deletions src/core/client/admin/components/ModerateCard/FlagDetails.tsx
View file
Open in desktop
@@ -0,0 +1,48 @@
import React, { FunctionComponent } from "react";

import NotAvailable from "coral-admin/components/NotAvailable";

import FlagDetailsCategory from "./FlagDetailsCategory";
import FlagDetailsEntry from "./FlagDetailsEntry";

interface Props {
category: React.ReactNode;
nodes: ReadonlyArray<{
flagger: { id: string; username: string | null } | null;
additionalDetails: string | null;
}>;
onUsernameClick: (id?: string) => void;
}

const FlagDetails: FunctionComponent<Props> = ({
category,
nodes,
onUsernameClick,
}) => {
if (nodes.length === 0) {
return null;
}

return (
<FlagDetailsCategory category={category}>
{nodes.map((flag, i) => (
<FlagDetailsEntry
key={i}
onClick={() =>
flag.flagger ? onUsernameClick(flag.flagger.id) : null
}
user={
flag.flagger && flag.flagger.username ? (
flag.flagger.username
) : (
<NotAvailable />
)
}
details={flag.additionalDetails}
/>
))}
</FlagDetailsCategory>
);
};

export default FlagDetails;
4 changes: 2 additions & 2 deletions src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css
View file
Open in desktop
@@ -1,8 +1,8 @@
$moderateCardFlagsCategoryColor: var(--v2-colors-mono-500);

.category {
font-size: var(--v2-font-size-4);
font-weight: var(--v2-font-weight-primary-regular);
font-size: var(--v2-font-size-3);
font-weight: var(--v2-font-weight-primary-bold);
font-family: var(--v2-font-family-primary);
line-height: var(--v2-line-height-body-short);
color: $moderateCardFlagsCategoryColor;
Expand Down
3 changes: 3 additions & 0 deletions src/core/client/admin/components/ModerateCard/FlagDetailsContainer.css
View file
Open in desktop
@@ -0,0 +1,3 @@
.detailsDivider {
border-top: 1px solid var(--v2-colors-grey-100);
}
162 changes: 87 additions & 75 deletions src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx
View file
Open in desktop
@@ -1,20 +1,61 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent } from "react";
import React, { FunctionComponent, useMemo } from "react";
import { graphql } from "react-relay";

import NotAvailable from "coral-admin/components/NotAvailable";
import { TOXICITY_THRESHOLD_DEFAULT } from "coral-common/constants";
import { withFragmentContainer } from "coral-framework/lib/relay";
import { GQLCOMMENT_FLAG_REASON } from "coral-framework/schema";
import { HorizontalGutter } from "coral-ui/components/v2";

import { FlagDetailsContainer_comment } from "coral-admin/__generated__/FlagDetailsContainer_comment.graphql";
import {
COMMENT_FLAG_REASON,
FlagDetailsContainer_comment,
} from "coral-admin/__generated__/FlagDetailsContainer_comment.graphql";
import { FlagDetailsContainer_settings } from "coral-admin/__generated__/FlagDetailsContainer_settings.graphql";

import FlagDetails from "./FlagDetails";
import FlagDetailsCategory from "./FlagDetailsCategory";
import FlagDetailsEntry from "./FlagDetailsEntry";
import ToxicityLabel from "./ToxicityLabel";

import styles from "./FlagDetailsContainer.css";

interface Reasons<T> {
offensive: T[];
abusive: T[];
spam: T[];
other: T[];
}

function reduceReasons<
T extends { readonly reason: COMMENT_FLAG_REASON | null }
>(nodes: ReadonlyArray<T>) {
const initialValue: Reasons<T> = {
offensive: [],
abusive: [],
spam: [],
other: [],
};

return nodes.reduce((reasons, node) => {
switch (node.reason) {
case GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_OFFENSIVE:
reasons.offensive.push(node);
break;
case GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_ABUSIVE:
reasons.abusive.push(node);
break;
case GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_SPAM:
reasons.spam.push(node);
break;
case GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_OTHER:
reasons.other.push(node);
break;
}

return reasons;
}, initialValue);
}

interface Props {
comment: FlagDetailsContainer_comment;
settings: FlagDetailsContainer_settings;
Expand All @@ -26,21 +67,16 @@ const FlagDetailsContainer: FunctionComponent<Props> = ({
onUsernameClick,
settings,
}) => {
const metadata = comment.revision ? comment.revision.metadata : null;
const nodes = comment.flags.nodes;

const offensive = nodes.filter(
({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_OFFENSIVE
);
const abusive = nodes.filter(
({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_ABUSIVE
);
const spam = nodes.filter(
({ reason }) => reason === GQLCOMMENT_FLAG_REASON.COMMENT_REPORTED_SPAM
const { offensive, abusive, spam, other } = useMemo(
() => reduceReasons(comment.flags.nodes),
[comment.flags.nodes]
);

const metadata = comment.revision ? comment.revision.metadata : null;

return (
<HorizontalGutter size="oneAndAHalf">
<hr className={styles.detailsDivider} />
{metadata && metadata.perspective && (
<FlagDetailsCategory
category={
Expand All @@ -58,66 +94,42 @@ const FlagDetailsContainer: FunctionComponent<Props> = ({
/>
</FlagDetailsCategory>
)}
{offensive.length > 0 && (
<FlagDetailsCategory
category={
<Localized id="moderate-flagDetails-offensive">
<span>Offensive</span>
</Localized>
}
>
{offensive.map((flag, i) => (
<FlagDetailsEntry
key={i}
onClick={() =>
flag.flagger ? onUsernameClick(flag.flagger.id) : null
}
user={flag.flagger ? flag.flagger.username : <NotAvailable />}
details={flag.additionalDetails}
/>
))}
</FlagDetailsCategory>
)}
{abusive.length > 0 && (
<FlagDetailsCategory
category={
<Localized id="moderate-flagDetails-abusive">
<span>Abusive</span>
</Localized>
}
>
{abusive.map((flag, i) => (
<FlagDetailsEntry
key={i}
onClick={() =>
flag.flagger ? onUsernameClick(flag.flagger.id) : null
}
user={flag.flagger ? flag.flagger.username : <NotAvailable />}
details={flag.additionalDetails}
/>
))}
</FlagDetailsCategory>
)}
{spam.length > 0 && (
<FlagDetailsCategory
category={
<Localized id="moderate-flagDetails-spam">
<span>Spam</span>
</Localized>
}
>
{spam.map((flag, i) => (
<FlagDetailsEntry
onClick={() =>
flag.flagger ? onUsernameClick(flag.flagger.id) : null
}
key={i}
user={flag.flagger ? flag.flagger.username : <NotAvailable />}
details={flag.additionalDetails}
/>
))}
</FlagDetailsCategory>
)}
<FlagDetails
category={
<Localized id="moderate-flagDetails-offensive">
<span>Offensive</span>
</Localized>
}
nodes={offensive}
onUsernameClick={onUsernameClick}
/>
<FlagDetails
category={
<Localized id="moderate-flagDetails-abusive">
<span>Abusive</span>
</Localized>
}
nodes={abusive}
onUsernameClick={onUsernameClick}
/>
<FlagDetails
category={
<Localized id="moderate-flagDetails-spam">
<span>Spam</span>
</Localized>
}
nodes={spam}
onUsernameClick={onUsernameClick}
/>
<FlagDetails
category={
<Localized id="moderate-flagDetails-other">
<span>Other</span>
</Localized>
}
nodes={other}
onUsernameClick={onUsernameClick}
/>
</HorizontalGutter>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css
View file
Open in desktop
Expand Up @@ -12,6 +12,7 @@ $moderateCardReasonTextColor: var(--v2-colors-mono-500);

.details {
color: $moderateCardReasonTextColor;
display: block;
font-size: var(--v2-font-size-2);
font-weight: var(--v2-font-weight-primary-regular);
font-family: var(--v2-font-family-primary);
Expand Down
12 changes: 2 additions & 10 deletions src/core/client/admin/components/ModerateCard/FlagDetailsEntry.tsx
View file
Open in desktop
Expand Up @@ -19,18 +19,10 @@ const FlagDetailsEntry: FunctionComponent<Props> = ({
<div>
{onClick && (
<BaseButton className={styles.flagger} onClick={onClick}>
<span className={styles.user}>
{user}
{details && ":"}
</span>
<span className={styles.user}>{user}</span>
</BaseButton>
)}
{!onClick && (
<span className={styles.user}>
{user}
{details && ":"}
</span>
)}
{!onClick && <span className={styles.user}>{user}</span>}
{details && <span className={styles.details}>{details}</span>}
</div>
);
Expand Down
5 changes: 0 additions & 5 deletions src/core/client/admin/components/ModerateCard/Markers.css
View file
Open in desktop
@@ -1,5 +1,4 @@
$moderateCardDetailsHeaderColor: var(--v2-colors-mono-500);
$moderateCardDetailsDividerColor: var(--v2-colors-grey-100);

.detailsButton {
font-size: var(--v2-font-size-1);
Expand All @@ -21,7 +20,3 @@ $moderateCardDetailsDividerColor: var(--v2-colors-grey-100);
.detailsText {
margin: 0;
}

.detailsDivider {
border-color: $moderateCardDetailsDividerColor;
}
17 changes: 5 additions & 12 deletions src/core/client/admin/components/ModerateCard/Markers.tsx
View file
Open in desktop
@@ -1,7 +1,7 @@
import { Localized } from "@fluent/react/compat";
import React, { FunctionComponent, useCallback, useState } from "react";
import React, { FunctionComponent } from "react";

import { useUUID } from "coral-framework/hooks";
import { useToggleState, useUUID } from "coral-framework/hooks";
import {
Button,
ButtonIcon,
Expand All @@ -18,10 +18,8 @@ interface Props {

const Markers: FunctionComponent<Props> = ({ children, details }) => {
const uuid = useUUID();
const [showDetails, setShowDetails] = useState<boolean>(false);
const toggleDetails = useCallback(() => setShowDetails(!showDetails), [
showDetails,
]);
const [showDetails, , toggleDetails] = useToggleState();

return (
<HorizontalGutter>
<Flex itemGutter>
Expand All @@ -43,12 +41,7 @@ const Markers: FunctionComponent<Props> = ({ children, details }) => {
</Button>
)}
</Flex>
{showDetails && (
<div id={uuid}>
<hr className={styles.detailsDivider} />
{details}
</div>
)}
{showDetails && <div id={uuid}>{details}</div>}
</HorizontalGutter>
);
};
Expand Down
26 changes: 14 additions & 12 deletions src/core/client/admin/components/ModerateCard/MarkersContainer.spec.tsx
View file
Open in desktop
Expand Up @@ -17,17 +17,18 @@ it("renders all markers", () => {
actionCounts: {
flag: {
reasons: {
COMMENT_REPORTED_SPAM: 3,
COMMENT_REPORTED_OTHER: 0,
COMMENT_REPORTED_OFFENSIVE: 2,
COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_DETECTED_TOXIC: 1,
COMMENT_DETECTED_SUSPECT_WORD: 1,
COMMENT_DETECTED_SPAM: 1,
COMMENT_DETECTED_REPEAT_POST: 1,
COMMENT_DETECTED_RECENT_HISTORY: 1,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_LINKS: 1,
COMMENT_DETECTED_BANNED_WORD: 1,
COMMENT_DETECTED_SUSPECT_WORD: 1,
COMMENT_REPORTED_OFFENSIVE: 2,
COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_REPORTED_SPAM: 3,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_REPEAT_POST: 1,
},
},
},
Expand Down Expand Up @@ -55,17 +56,18 @@ it("renders some markers", () => {
actionCounts: {
flag: {
reasons: {
COMMENT_REPORTED_SPAM: 0,
COMMENT_REPORTED_OTHER: 0,
COMMENT_REPORTED_OFFENSIVE: 2,
COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_DETECTED_TOXIC: 1,
COMMENT_DETECTED_SUSPECT_WORD: 0,
COMMENT_DETECTED_SPAM: 0,
COMMENT_DETECTED_REPEAT_POST: 0,
COMMENT_DETECTED_RECENT_HISTORY: 1,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_LINKS: 0,
COMMENT_DETECTED_BANNED_WORD: 1,
COMMENT_DETECTED_SUSPECT_WORD: 0,
COMMENT_REPORTED_OFFENSIVE: 2,
COMMENT_REPORTED_ABUSIVE: 0,
COMMENT_REPORTED_SPAM: 0,
COMMENT_DETECTED_NEW_COMMENTER: 0,
COMMENT_DETECTED_REPEAT_POST: 0,
},
},
},
Expand Down