[CORL-3006]: Enable anonymous DSA reporting

client/src/core/client/admin/routes/Reports/ReportRowContainer.tsx

@@ -1,3 +1,4 @@
+import { Localized } from "@fluent/react/compat";
 import { useRouter } from "found";
 import React, { useCallback } from "react";
 import { graphql } from "react-relay";
@@ -89,7 +90,19 @@ const ReportRowContainer: React.FunctionComponent<Props> = ({ dsaReport }) => {
           <div>-</div>
         )}
       </TableCell>
-      <TableCell>{dsaReport.reporter?.username}</TableCell>
+      <TableCell>
+        {dsaReport.reporter ? (
+          dsaReport.reporter.username ?? (
+            <Localized id="reports-username-not-available">
+              <span>Username not available</span>
+            </Localized>
+          )
+        ) : (
+          <Localized id="reports-anonymous-user">
+            <span>Anonymous user</span>
+          </Localized>
+        )}
+      </TableCell>
       <TableCell>{dsaReport.referenceID}</TableCell>
       <TableCell>
         <div className={styles.lawBrokenCell}>

client/src/core/client/admin/routes/Reports/SingleReportRoute.tsx

@@ -193,13 +193,19 @@ const SingleReportRoute: FunctionComponent<Props> & {
                       uppercase={false}
                       onClick={() => onShowUserDrawer(dsaReport.reporter?.id)}
                     >
-                      <div>{dsaReport.reporter.username}</div>
+                      {dsaReport.reporter.username ? (
+                        <div>{dsaReport.reporter.username}</div>
+                      ) : (
+                        <Localized id="reports-singleReport-reporterNameNotAvailable">
+                          <div className={styles.data}>
+                            Reporter name not available
+                          </div>
+                        </Localized>
+                      )}
                     </Button>
                   ) : (
-                    <Localized id="reports-singleReport-reporterNameNotAvailable">
-                      <div className={styles.data}>
-                        Reporter name not available
-                      </div>
+                    <Localized id="reports-anonymous-user">
+                      <div className={styles.data}>Anonymous user</div>
                     </Localized>
                   )}
                 </Flex>

client/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx

@@ -749,6 +749,7 @@ export const CommentContainer: FunctionComponent<Props> = ({
                         open={showReportFlow}
                         viewer={viewer}
                         comment={comment}
+                        settings={settings}
                       />
                     )}
                 </ButtonsBar>
@@ -920,6 +921,7 @@ const enhanced = withShowAuthPopupMutation(
         ...UserTagsContainer_settings
         ...ArchivedReportFlowContainer_settings
         ...AuthorBadgesContainer_settings
+        ...ReportButton_settings
       }
     `,
   })(CommentContainer)

client/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx

@@ -15,6 +15,7 @@ import { Flex, MatchMedia } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
 
 import { ReportButton_comment } from "coral-stream/__generated__/ReportButton_comment.graphql";
+import { ReportButton_settings } from "coral-stream/__generated__/ReportButton_settings.graphql";
 import { ReportButton_viewer } from "coral-stream/__generated__/ReportButton_viewer.graphql";
 
 import styles from "./ReportButton.css";
@@ -26,13 +27,15 @@ interface Props {
   showAuthPopup: MutationProp<typeof ShowAuthPopupMutation>;
   comment: ReportButton_comment;
   viewer: ReportButton_viewer | null;
+  settings: ReportButton_settings;
 }
 
 const ReportButton: FunctionComponent<Props> = ({
   onClick,
   showAuthPopup,
   comment,
   viewer,
+  settings,
   open,
 }) => {
   const isLoggedIn = !!viewer;
@@ -47,6 +50,18 @@ const ReportButton: FunctionComponent<Props> = ({
     void showAuthPopup({ view: "SIGN_IN" });
   }, [showAuthPopup]);
 
+  const handleOnClick = useCallback(() => {
+    if (settings.dsa?.enabled) {
+      onClick();
+      return;
+    }
+    if (isLoggedIn) {
+      onClick();
+    } else {
+      signIn();
+    }
+  }, [isLoggedIn, onClick, signIn, settings]);
+
   if (isReported) {
     return (
       <Localized
@@ -95,7 +110,7 @@ const ReportButton: FunctionComponent<Props> = ({
         fontSize="small"
         fontWeight="semiBold"
         paddingSize="extraSmall"
-        onClick={isLoggedIn ? onClick : signIn}
+        onClick={handleOnClick}
         data-testid="comment-report-button"
       >
         <Flex alignItems="center" container="span">
@@ -131,6 +146,13 @@ const enhanced = withShowAuthPopupMutation(
         }
       }
     `,
+    settings: graphql`
+      fragment ReportButton_settings on Settings {
+        dsa {
+          enabled
+        }
+      }
+    `,
   })(ReportButton)
 );
 

client/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx

@@ -18,7 +18,7 @@ import {
   ButtonSvgIcon,
   ShareExternalLinkIcon,
 } from "coral-ui/components/icons";
-import { Flex, RadioButton } from "coral-ui/components/v2";
+import { Flex, HorizontalGutter, RadioButton } from "coral-ui/components/v2";
 import { Button, ValidationMessage } from "coral-ui/components/v3";
 
 import { ReportCommentFormLocal } from "coral-stream/__generated__/ReportCommentFormLocal.graphql";
@@ -45,12 +45,36 @@ const RadioField: FunctionComponent<
   </Field>
 );
 
+const IllegalContentLink: FunctionComponent<{ reportLink: string }> = ({
+  reportLink,
+}) => (
+  <Button
+    className={styles.reportIllegalLink}
+    variant="flat"
+    color="primary"
+    fontSize="medium"
+    fontWeight="semiBold"
+    paddingSize="none"
+    target="_blank"
+    anchor
+    underline
+    textAlign="left"
+    href={reportLink}
+  >
+    <Localized id="comments-reportForm-reportIllegalContent-button">
+      <span>This comment contains illegal content</span>
+    </Localized>
+    <ButtonSvgIcon className={styles.linkIcon} Icon={ShareExternalLinkIcon} />
+  </Button>
+);
+
 interface Props {
   id: string;
   onCancel: () => void;
   onSubmit: OnSubmit<any>;
   biosEnabled: boolean;
   reportLink: string;
+  anonymousWithDSA: boolean;
 }
 
 export interface FormProps {
@@ -68,6 +92,7 @@ const ReportCommentForm: FunctionComponent<Props> = ({
   id,
   reportLink,
   biosEnabled,
+  anonymousWithDSA,
 }) => {
   const [{ dsaFeaturesEnabled }] = useLocal<ReportCommentFormLocal>(
     graphql`
@@ -84,6 +109,28 @@ const ReportCommentForm: FunctionComponent<Props> = ({
     emitReportEvent({ commentID: id });
   }, []);
 
+  if (anonymousWithDSA) {
+    return (
+      <div
+        className={cn(styles.root, CLASSES.reportPopover.$root)}
+        data-testid="report-comment-form"
+        role="none"
+      >
+        <div>
+          <Localized id="comments-reportPopover-reportThisComment">
+            <div className={styles.title}>Report This Comment</div>
+          </Localized>
+          <HorizontalGutter>
+            <Localized id="comments-reportForm-signInToReport">
+              <div>You have to sign in to report a comment</div>
+            </Localized>
+            <IllegalContentLink reportLink={reportLink} />
+          </HorizontalGutter>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(styles.root, CLASSES.reportPopover.$root)}
@@ -184,27 +231,7 @@ const ReportCommentForm: FunctionComponent<Props> = ({
                 </li>
               </ul>
               {dsaFeaturesEnabled && (
-                <Button
-                  className={styles.reportIllegalLink}
-                  variant="flat"
-                  color="primary"
-                  fontSize="medium"
-                  fontWeight="semiBold"
-                  paddingSize="none"
-                  target="_blank"
-                  anchor
-                  underline
-                  textAlign="left"
-                  href={reportLink}
-                >
-                  <Localized id="comments-reportForm-reportIllegalContent-button">
-                    <span>This comment contains illegal content</span>
-                  </Localized>
-                  <ButtonSvgIcon
-                    className={styles.linkIcon}
-                    Icon={ShareExternalLinkIcon}
-                  />
-                </Button>
+                <IllegalContentLink reportLink={reportLink} />
               )}
               <Localized
                 id="comments-reportPopover-additionalInformation"

client/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentFormContainer.tsx

@@ -31,12 +31,14 @@ interface Props {
   comment: ReportCommentFormContainer_comment;
   settings: ReportCommentFormContainer_settings;
   onClose: () => void;
+  anonymousWithDSA: boolean;
 }
 
 const ReportCommentFormContainer: FunctionComponent<Props> = ({
   comment,
   settings,
   onClose,
+  anonymousWithDSA,
 }) => {
   const [done, setDone] = useState(false);
   const dontAgreeMutation = useMutation(CreateCommentDisagreeMutation);
@@ -109,6 +111,7 @@ const ReportCommentFormContainer: FunctionComponent<Props> = ({
         onCancel={onClose}
         biosEnabled={settings.memberBios}
         reportLink={reportLink}
+        anonymousWithDSA={anonymousWithDSA}
       />
     );
   }

client/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportFlowContainer.tsx

@@ -25,22 +25,32 @@ const ReportFlowContainer: FunctionComponent<Props> = ({
   const onFormClose = useCallback(() => {
     onClose();
   }, [onClose]);
+
+  let anonymousWithDSA = false;
   if (!viewer) {
-    return null;
+    if (!settings.dsa?.enabled) {
+      return null;
+    } else {
+      anonymousWithDSA = true;
+    }
   }
 
   return (
     <ReportCommentFormContainer
       comment={comment}
       onClose={onFormClose}
       settings={settings}
+      anonymousWithDSA={anonymousWithDSA}
     />
   );
 };
 
 const enhanced = withFragmentContainer<Props>({
   settings: graphql`
     fragment ReportFlowContainer_settings on Settings {
+      dsa {
+        enabled
+      }
       ...ReportCommentFormContainer_settings
     }
   `,

client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx

@@ -92,12 +92,12 @@ const IllegalContentReportViewContainer: FunctionComponent<Props> = (props) => {
   const onSubmit = useCallback(
     async (input: FormProps, form: FormApi) => {
       const statuses = [];
-      if (viewer && comment) {
+      if (comment) {
         if (additionalComments) {
           for (const c of additionalComments) {
             try {
               await createDSAReport({
-                userID: viewer.id,
+                userID: viewer?.id ?? null,
                 commentID: c.id,
                 lawBrokenDescription: input.lawBrokenDescription,
                 additionalInformation: input.additionalInformation,
@@ -117,7 +117,7 @@ const IllegalContentReportViewContainer: FunctionComponent<Props> = (props) => {
         const url = getURLWithCommentID(story.url, comment.id);
         try {
           await createDSAReport({
-            userID: viewer.id,
+            userID: viewer?.id ?? null,
             commentID: comment.id,
             lawBrokenDescription: input.lawBrokenDescription,
             additionalInformation: input.additionalInformation,

client/src/core/client/stream/test/comments/stream/reportComment.spec.tsx

@@ -212,3 +212,25 @@ it("report comment includes link to report illegal content", async () => {
     "https://www.test.com/story-0?commentID=comment-0&view=illegalContentReport"
   );
 });
+
+it("can report illegal content when not signed in", async () => {
+  const commentID = stories[0].comments.edges[0].node.id;
+  await createTestRenderer({ Query: { viewer: () => null } });
+  const comment = await screen.findByTestId(`comment-${commentID}`);
+  const reportButton = screen.getByRole("button", {
+    name: "Report comment by Markus",
+  });
+  userEvent.click(reportButton);
+  const form = within(comment).getByTestId("report-comment-form");
+  const reportIllegalContentButton = within(form).getByRole("link", {
+    name: "This comment contains illegal content share-external-link-1",
+  });
+  expect(reportIllegalContentButton).toHaveAttribute(
+    "href",
+    "https://www.test.com/story-0?commentID=comment-0&view=illegalContentReport"
+  );
+  const signInToReport = within(form).getByText(
+    "You have to sign in to report a comment"
+  );
+  expect(signInToReport).toBeVisible();
+});

locales/en-US/admin.ftl

@@ -1937,6 +1937,9 @@ reports-decisionModal-detailedExplanationTextarea =
 reports-relatedReports-label = Related reports
 reports-relatedReports-reportIDLabel = Report ID
 
+reports-anonymousUser = Anonymous user
+reports-username-not-available = Username not available
+
 # Control panel
 
 controlPanel-redis-redis = Redis

locales/en-US/stream.ftl

@@ -749,6 +749,7 @@ comments-reportPopover-receivedMessage =
 comments-reportPopover-dismiss = Dismiss
 
 comments-reportForm-reportIllegalContent-button = This comment contains illegal content
+comments-reportForm-signInToReport = You have to sign in to report a comment
 
 ## Archived Report Comment Popover
 

server/src/core/server/graph/schema/schema.graphql

@@ -6464,7 +6464,6 @@ input SettingsInput {
   """
   flairBadges: FlairBadgeConfigurationInput
 
-
   """
   dsa specifies the configuration for DSA European Union moderation and
   reporting features.
@@ -6910,7 +6909,7 @@ input CreateDSAReportInput {
   """
   id of the user who submitted the DSAReport
   """
-  userID: ID!
+  userID: ID
 
   """
   lawBrokenDescription is the text entered by the submitting user to describe

server/src/core/server/locales/en-US/common.ftl

@@ -43,6 +43,8 @@ dsaReportCSV-status-awaitingReview = Awaiting review
 dsaReportCSV-status-inReview = In review
 dsaReportCSV-status-completed = Completed
 dsaReportCSV-status-void = Void
+dsaReportCSV-anonymousUser = Anonymous user
+dsaReportCSV-usernameNotAvailable = Username not available
 
 # Notifications