Merge pull request #4447 from coralproject/develop

8.6.2

INDEXES.md

@@ -6,6 +6,22 @@ The goal of this document is to date-mark the indexes you add to support the cha
 
 If you are releasing, you can use this readme to check all the indexes prior to the release you are deploying and have a good idea of what indexes you might need to deploy to Mongo along with your release of a new Coral Docker image to kubernetes.
 
+## 2023-11-24
+
+```
+db.dsaReports.createIndex({ tenantID: 1, id: 1 }, { unique: true });
+```
+
+- This index creates the uniqueness constraint for the `tenantID` and `id` fields on the `dsaReports`
+
+```
+db.dsaReports.createIndex({ status: 1, createdAt: 1, tenantID: 1 });
+db.dsaReports.createIndex({ referenceID: 1, tenantID: 1 });
+db.dsaReports.createIndex({ submissionID: 1, tenantID: 1 });
+```
+
+- These indices are used to optimize pagination of `dsaReports` and allow them to be retrieved by their `referenceID`, `submissionID` efficiently.
+
 ## 2023-10-18
 
 ```

client/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@coralproject/talk",
- "version": "8.6.1",
+ "version": "8.6.2",
  "author": "The Coral Project",
  "homepage": "https://coralproject.net/",
  "sideEffects": [

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

@@ -0,0 +1,29 @@
+.wrapper {
+ background-color: var(--palette-grey-200);
+ font-family: var(--font-family-primary);
+}
+
+.full {
+ width: 100%;
+}
+
+.label {
+ font-size: var(--font-size-1);
+ font-weight: var(--font-weight-primary-semi-bold);
+ text-transform: uppercase;
+ color: var(--palette-grey-500);
+}
+
+.rejected {
+ color: var(--palette-text-000);
+ background-color: var(--palette-error-500);
+ text-transform: uppercase;
+ padding: var(--spacing-1) var(--spacing-2);
+ width: fit-content;
+ font-size: var(--font-size-1);
+ font-weight: var(--font-weight-primary-semi-bold);
+}
+
+.info {
+ font-size: var(--font-size-2);
+}

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

@@ -0,0 +1,102 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { Flex, HorizontalGutter, Timestamp } from "coral-ui/components/v2";
+
+import { DecisionDetailsContainer_comment } from "coral-admin/__generated__/DecisionDetailsContainer_comment.graphql";
+
+import styles from "./DecisionDetailsContainer.css";
+
+import { unsnake } from "../ModerationReason/formatting";
+
+interface Props {
+ comment: DecisionDetailsContainer_comment;
+}
+
+const DecisionDetailsContainer: FunctionComponent<Props> = ({ comment }) => {
+ const statusHistory = comment.statusHistory.edges[0].node;
+ const { rejectionReason, createdAt } = statusHistory;
+
+ return (
+ <HorizontalGutter className={styles.wrapper} padding={3}>
+ <Flex>
+ <Flex direction="column" className={styles.full}>
+ <Localized id="moderate-decisionDetails-decisionLabel">
+ <div className={styles.label}>Decision</div>
+ </Localized>
+ <Localized id="moderate-decisionDetails-rejected">
+ <div className={styles.rejected}>Rejected</div>
+ </Localized>
+ </Flex>
+ {rejectionReason && rejectionReason.code && (
+ <Flex direction="column" className={styles.full}>
+ <Localized id="moderate-decisionDetails-reasonLabel">
+ <div className={styles.label}>Reason</div>
+ </Localized>
+ <Localized
+ id={`common-moderationReason-rejectionReason-${rejectionReason.code}`}
+ >
+ <div className={styles.info}>{unsnake(rejectionReason.code)}</div>
+ </Localized>
+ </Flex>
+ )}
+ </Flex>
+ {rejectionReason?.legalGrounds && (
+ <Flex direction="column">
+ <Localized id="moderate-decisionDetails-lawBrokenLabel">
+ <div className={styles.label}>Law broken</div>
+ </Localized>
+ <div className={styles.info}>{rejectionReason?.legalGrounds}</div>
+ </Flex>
+ )}
+ {rejectionReason?.customReason && (
+ <Flex direction="column">
+ <Localized id="moderate-decisionDetails-customReasonLabel">
+ <div className={styles.label}>Custom reason</div>
+ </Localized>
+ <div className={styles.info}>{rejectionReason?.customReason}</div>
+ </Flex>
+ )}
+ {rejectionReason?.detailedExplanation && (
+ <Flex direction="column">
+ <Localized id="moderate-decisionDetails-detailedExplanationLabel">
+ <div className={styles.label}>Detailed explanation</div>
+ </Localized>
+ <div className={styles.info}>
+ {rejectionReason?.detailedExplanation}
+ </div>
+ </Flex>
+ )}
+ <Flex>
+ <div className={styles.label}>
+ <Timestamp>{createdAt}</Timestamp>
+ </div>
+ </Flex>
+ </HorizontalGutter>
+ );
+};
+
+const enhanced = withFragmentContainer<Props>({
+ comment: graphql`
+ fragment DecisionDetailsContainer_comment on Comment {
+ id
+ statusHistory(first: 1) {
+ edges {
+ node {
+ createdAt
+ rejectionReason {
+ code
+ legalGrounds
+ detailedExplanation
+ customReason
+ }
+ }
+ }
+ }
+ }
+ `,
+})(DecisionDetailsContainer);
+
+export default enhanced;

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

@@ -10,6 +10,7 @@ interface Props {
  nodes: ReadonlyArray<{
  flagger: { id: string; username: string | null } | null;
  additionalDetails: string | null;
+ reportID?: string | null;
  }>;
  onUsernameClick: (id?: string) => void;
 }
@@ -39,6 +40,7 @@ const FlagDetails: FunctionComponent<Props> = ({
  )
  }
  details={flag.additionalDetails}
+ reportID={flag.reportID}
  />
  ))}
  </FlagDetailsCategory>

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

@@ -70,12 +70,23 @@ const FlagDetailsContainer: FunctionComponent<Props> = ({
  [comment.flags.nodes]
  );
 
+ const illegalContent = comment.illegalContent.nodes;
+
  return (
  <>
  <Localized id="moderate-flagDetails-latestReports">
  <p className={styles.latestReports}>Latest reports</p>
  </Localized>
  <HorizontalGutter size="oneAndAHalf">
+ <FlagDetails
+ category={
+ <Localized id="moderate-flagDetails-illegalContent">
+ <span>Illegal content</span>
+ </Localized>
+ }
+ nodes={illegalContent}
+ onUsernameClick={onUsernameClick}
+ />
  <FlagDetails
  category={
  <Localized id="moderate-flagDetails-offensive">
@@ -139,6 +150,16 @@ const enhanced = withFragmentContainer<Props>({
  additionalDetails
  }
  }
+ illegalContent {
+ nodes {
+ flagger {
+ username
+ id
+ }
+ additionalDetails
+ reportID
+ }
+ }
  revision {
  metadata {
  perspective {

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

@@ -21,7 +21,7 @@ $moderateCardReasonTextColor: var(--palette-text-500);
 }
 
 .flagger {
- margin-right: var(--mini-unit);
+ margin-right: var(--spacing-1);
  padding: var(--spacing-1);
  margin-left: calc(-1 * var(--spacing-1));
 
@@ -37,3 +37,7 @@ $moderateCardReasonTextColor: var(--palette-text-500);
  border-style: none;
  }
 }
+
+.viewReportButton {
+ padding: var(--spacing-1) !important;
+}

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

@@ -1,19 +1,22 @@
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 
-import { BaseButton } from "coral-ui/components/v2";
+import { BaseButton, Button } from "coral-ui/components/v2";
 
 import styles from "./FlagDetailsEntry.css";
 
 interface Props {
  user: React.ReactNode;
  details?: React.ReactNode;
  onClick?: () => void;
+ reportID?: React.ReactNode;
 }
 
 const FlagDetailsEntry: FunctionComponent<Props> = ({
  user,
  details,
  onClick,
+ reportID,
 }) => {
  return (
  <div>
@@ -23,6 +26,18 @@ const FlagDetailsEntry: FunctionComponent<Props> = ({
  </BaseButton>
  )}
  {!onClick && <span className={styles.user}>{user}</span>}
+ {reportID && (
+ <Localized id="moderate-flagDetails-viewDSAReport">
+ <Button
+ className={styles.viewReportButton}
+ color="regular"
+ to={`/admin/reports/report/${reportID}`}
+ variant="textUnderlined"
+ >
+ View DSA Report
+ </Button>
+ </Localized>
+ )}
  {details && <span className={styles.details}>{details}</span>}
  </div>
  );

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

@@ -2,3 +2,14 @@
  text-transform: uppercase;
  font-size: var(--font-size-2);
 }
+
+.decisionIcon {
+ height: 1.125rem;
+ width: 1.75rem;
+ margin: 0 var(--spacing-1) 0 0 !important;
+}
+
+.decisionIcon svg {
+ height: 1.125rem;
+ width: 1.75rem;
+}